CSS预处理器变量需注意作用域与覆盖顺序，Sass用!default安全覆盖，Less依赖导入顺序；嵌套宜浅（≤3层），Mixin应精简参数并用命名调用；@use优于@import，模块化须规范目录与导入顺序。
变量定义：一处改，全局变，但要注意作用域和覆盖顺序
原生 CSS 没有变量，颜色、间距、字体反复写，改主题时得满项目搜替换。$primary-color（Sass）或 @primary-color（Less）能解决这个问题——但变量不是“全局自动生效”。作用域很关键：在 _variables.scss 中用 !default 声明默认值（$color-brand: #007bff !default;），再在主题文件里重定义，才能安全覆盖；否则后导入的变量会被先导入的覆盖，导致修改不生效。
- Less 不支持
!default，需靠导入顺序控制，更易出错 - Sass 的模块化导入（
@use）比旧式@import更安全，能避免变量污染 - 别在组件文件里重复定义同名变量，否则编译后可能产生不可预期的覆盖
嵌套写法：结构清晰，但别嵌太深
嵌套让父子关系一目了然，比如 .card 里写 &:hover 或 img 子元素，编译后自动拼出完整选择器。但嵌套超过 3–4 层就容易失控：.layout .sidebar .nav .item a:hover 这种选择器权重高、难覆盖，也违背 BEM 原则。
- SCSS 中用
&引用父级，写&.is-active比手写.card.is-active更可靠 - Less 的嵌套不支持属性嵌套（如
background: { color: red; image: url(x); }），Sass 可以 - Vite 或 Webpack 默认开启嵌套警告（
max-nesting-depth），建议配 ESLint 插件提前拦截
Mixin 封装：像写函数一样复用样式，但别滥用参数
@mixin（Sass）或 .button-style()（Less）本质是样式函数，适合封装带逻辑的公共块，比如响应式断点、渐变背景、Flex 布局基类。但传太多参数反而难维护——一个 @mixin button($bg, $color, $border, $radius, $shadow, $size) 实际使用时几乎每次都要填全，失去复用意义。
- 优先用命名参数（Sass 支持
@include button($bg: blue)）和默认值，降低调用门槛 - Less 的 mixin 不支持可变参数（
...）和@content插槽，复杂逻辑建议用 Sass - 纯静态样式（如固定
display: flex）不如直接写 class，Mixin 不是万能胶
模块化导入：7-1 规范不是教条，但顺序错了真会样式丢失
大型项目常用 abstracts/（变量、mixin）、base/（重置、通用）、components/ 分目录管理。Sass 推荐用 @use "abstracts/functions" 而非 @import，因为前者不会把所有变量暴露到全局，避免命名冲突。
立即学习“前端免费学习笔记（深入）”；
- 如果用了
@import，必须确保_variables.scss在最前面导入，否则后续文件里的变量引用会报Undefined variable - Less 的
@import默认是 inline 模式（内容直接插入），容易造成重复编译，加(reference)才能只引入定义不输出 CSS - Vite 中启用
sassOptions或lessOptions可统一配置includePaths，避免写一堆../..相对路径
@use 和 @import 混用、嵌套层级没人 review——这些细节不强制规范，再好的预处理器也会变成技术债加速器。 
