直接写CSS易失控因无变量机制，Sass通过$variable统一管理值、@mixin复用样式块、合理嵌套与规范配置实现可维护性。
为什么直接写 CSS 容易失控，而 Sass 的 $variable 能稳住局面
纯 CSS 没有变量机制，颜色、间距、断点反复硬编码，改一个主题色要全局搜索替换，稍不留神就漏掉 .header__title--dark 里的 #333。Sass 的 $color-primary: #2563eb 把值抽出来，所有引用它的地方自动同步——不是靠编辑器替换，是编译时真实复用。
关键不在“能写变量”，而在“变量该定义在哪”：通常建 _variables.scss，用 @use 导入（别再用已废弃的 @import），且优先用 !default 声明可被覆盖的默认值：
$spacing-sm: 0.5rem !default; $border-radius-base: 4px !default;
这样下游模块想局部调整圆角，只需在导入前重定义 $border-radius-base: 6px，不污染全局。
嵌套规则怎么写才不反人类：警惕选择器爆炸和语义断裂
Sass 嵌套让 .card { &__header { ... } &__body { ... } } 看起来清爽，但过度嵌套会生成过深的选择器，比如 .layout .sidebar .nav .item .link:hover，既难维护又影响性能。真正该嵌套的，是强耦合的 BEM 元素或伪类状态。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 单文件内嵌套层级不超过 3 层（
.component { &__element { &:hover { ... } } }） - 避免跨组件嵌套：
.header { .button { ... } }违背封装，应改为独立.button--header类 - 用
&显式拼接父选择器，别依赖隐式继承：写&:hover而非hover，否则编译后变成hover标签选择器
@mixin 和 @include 解决的是哪类重复代码
变量管“值复用”，@mixin 管“块复用”。比如 CSS Grid 布局、Flex 对齐、响应式字体这些固定结构，每次手写既啰嗦又容易错参数顺序。
一个实用的 @mixin 示例：
@mixin responsive-font($min: 1rem, $max: 1.5rem) {
font-size: clamp($min, 0.5vw + 0.75rem, $max);
}
调用时：@include responsive-font(1.125rem, 1.75rem)。注意：Mixin 不是函数，不返回值，只展开样式块；若需计算后返回值，得用 @function。
容易踩的坑：
- Mixin 内避免写具体类名（如
.btn），保持原子性 - 带参数的 Mixin 别省略默认值，否则调用时漏传会报错
- 不要用 Mixin 模拟 JavaScript 逻辑（比如循环生成 12 个列宽），该用
@for就用@for
编译环节最容易被忽略的配置细节
很多人装了 Sass 就以为万事大吉，结果开发时改了 _variables.scss 却没热更新，或者生产环境输出的 CSS 里还带着大量注释和空行。问题常出在构建配置上。
关键项检查清单：
- 开发模式用
style选项设为expanded（便于调试），生产环境必须切到compressed - 确保监听了所有
_*.scss文件（下划线前缀表示 partial，不会单独编译，但改动后主文件需触发重编译） - 如果用 Vite 或 Webpack，确认 Sass 插件版本兼容：Vite 4+ 要用
sass（Dart Sass）而非node-sass（已停更） - 路径别名需在 Sass 配置中显式声明，例如
@use "@/styles/variables" as *;前，得先在vite.config.ts的css.preprocessorOptions.sass.additionalData或includePaths中配好别名解析
最隐蔽的问题是：Sass 编译错误有时静默吞掉，只在浏览器控制台显示“Failed to load resource”，实际是 _mixins.scss 里少了个分号——务必打开构建工具的详细日志开关。
