变量必须收敛到单一入口文件，命名需带语义；mixin应轻量且引用变量；目录须分层并显式声明依赖；嵌套不超过三层。
变量集中管理，避免全局搜索替换
改一个主题色要手动搜遍所有 CSS 文件？这就是没用变量的典型症状。@primary-color（Less）或 $primary-color（Sass）不是锦上添花，而是止损刚需。大型项目里颜色、间距、断点这些值一旦散落在几十个文件里，漏改一处就可能让设计走样。
关键点在于：变量必须收敛到单一入口文件（如 variables.less 或 _variables.scss），且所有组件样式都只从这里读取——不是“能用就行”，而是“只能从这里来”。否则会出现同名变量在不同文件里被重复定义，而 Less 完全依赖导入顺序决定最终值，Sass 虽有 !default 机制，但若滥用 @import 乱序引入，照样失效。
- 命名必须带语义：
@color-text-secondary比@gray-3更可靠，后者根本看不出用途，也难判断是否该复用 - 不要在组件文件里写
@primary-color: #ff6b35;——它不会报错，但会静默覆盖上级变量，调试时毫无线索 - Sass 推荐用
@use替代@import，避免变量污染；Less 没这选项，只能靠目录结构和index.less强制约束导入链
Mixin 封装逻辑，而非堆砌样式
.flex-center() 或 @mixin button-base 的价值不在“写了”，而在“只写一次、多处调用、改一处全生效”。但很多人把 Mixin 当成万能胶，塞进六七个参数，结果每次调用都得填满，复用率反而归零。
真正有效的 Mixin 是轻量、有明确职责的：比如 .responsive-font(@size) 内部自动处理 rem + px fallback，或者 .border-radius(@r: @radius-md) 只接受一个参数，默认引用变量，不硬编码像素值。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- Less Mixin 不支持
@content插槽和可变参数，复杂逻辑（如条件生成多套媒体查询）建议交给 Sass - 别为纯静态样式写 Mixin：
display: flex就该直接写 class，没必要包一层.flex() - 所有 Mixin 内部必须引用变量（如
@border-radius-default），而不是写死4px，否则变量体系就断了
分层目录 + index 入口，切断隐式依赖
编译报错 Variable is undefined 或 Undefined mixin，90% 不是语法错，而是依赖没显式声明。Less 和 Sass 都不检查“谁用了谁”，只按导入顺序线性展开。你在一个 card.less 里用了 .shadow-sm()，却没 @import "mixins"，靠父文件间接带入——这种侥幸在重构目录时必然崩盘。
解法很机械但有效：每个功能目录下必须有 index.less 或 _index.scss，只做两件事：声明本模块对外暴露的内容、显式列出依赖项。根目录的 styles/index.less 按层级顺序导入：base/ → layout/ → components/ → pages/，业务页永远只 @import "../index"，禁止直连深层路径。
-
pages/下的样式禁止出现通用规则（如.btn），否则说明它本该属于components/ -
base/层放重置、工具类、基础变量；layout/层管栅格、容器、全局布局；越往上抽象度越高、变更越少 - Webpack 别名（如
@/styles）配合这种结构才能真正解耦，否则路径写死照样拖垮维护性
嵌套控制在三层以内，防止选择器失控
嵌套确实让结构清晰，但 .page .section .card .header h1 这种选择器权重高、难覆盖、违背 BEM 原则，而且编译后体积膨胀。Sass/Less 不会帮你做减法，只会忠实拼接。
真正该嵌套的是有强父子关系且不会被单独复用的部分，比如 .card { img { border-radius: @radius-sm; }。而像 &:hover、&.is-active 这种状态类，用 & 引用父级比手写全称更安全，也更易维护。
- 嵌套超过三层时，优先考虑拆成独立 class（如
card__header）或提取为新组件 - Less 不支持属性嵌套（如
background: { color: red; }），Sass 可以，但实际项目中极少需要，别为炫技增加认知负担 - Vite/Webpack 的 ESLint 插件（如
stylelint-scss）可配max-nesting-depth: 3提前拦截
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
