Sass变量是改布局时少出错的底线，需顶层定义、语义命名、配合@use模块化管理，并通过构建工具同步至JS。
怎么用Sass变量代替重复的CSS值
改一个颜色要搜遍整个CSS文件？那说明你还没把 $primary-color、$spacing-sm 这类变量立起来。Sass变量不是锦上添花，是改布局时少出错的底线。
常见错误现象：写 margin: 8px 五次，后来想统一改成 12px，结果漏改一处，UI对不齐；或者 #4a90e2 手动复制粘贴，某次拼错成 #4a90e3，半天看不出哪不对。
- 变量必须在
@import或@use的顶层定义，不能嵌套在选择器或@media里 - 推荐用
@use "sass:math"配合math.div()做响应式计算，别手写calc(100% / 3 - 4px) - 命名别用
$blue这种模糊词，用语义名如$brand-accent或尺寸名如$space-xs
Sass嵌套写法哪些情况会踩坑
嵌套看着省事，但一不小心就生成超长选择器，影响性能还难覆盖。比如 .header .nav .item:hover 实际编译出来可能是 .layout__main .header .nav .item:hover，多了一层就可能压不住第三方组件样式。
使用场景：适合有明确父子关系且不会复用的局部样式，比如弹窗内部按钮组；不适合全局组件或需要被外部覆盖的模块。
立即学习“前端免费学习笔记（深入）”；
- 避免三层以上嵌套，超过就拆成独立选择器
-
&符号必须紧贴前一个选择器，写成& .btn可以，写成& .btn（带空格）会报错Invalid CSS after "&": expected selector, was "." - 媒体查询嵌套时，
@media (min-width: 768px)要写在最外层规则内，否则编译后断点逻辑会错位
如何让Sass变量在JS里也能读到
前端要动态切换主题？光靠CSS变量不够，得让JS知道 $theme-dark 对应的色值是多少。硬编码肯定不行，得打通Sass和JS的变量源头。
关键不是“传过去”，而是“共用同一份源”。直接在Sass里用 :export 不行（那是CSS Modules），得靠构建工具导出。
- 用
sass-true或自定义脚本把_variables.scss解析成JSON，再让JSimport进来 - 更轻量的做法：在
_variables.scss顶部加注释块，例如// EXPORT: { "primary": "#4a90e2", "radius": "4px" }，再用正则提取 - 注意：Sass的
map-get($colors, primary)在JS里不可用，别指望运行时调用
为什么用 @use 替代 @import
旧项目还在用 @import？它会让所有变量全局污染，两个模块都定义了 $border-radius，后引入的会静默覆盖前一个，调试时完全找不到源头。
@use 是Sass 1.23+ 的默认方式，强制模块化，每个文件变量默认私有，要用得显式暴露。
-
@use "styles/vars" as v后，必须写v.$primary-color才能访问，杜绝命名冲突 -
@use "styles/vars" with ($primary-color: #ff6b6b)支持传参覆盖，适合主题定制 - Webpack/Vite 默认支持
@use，但老版node-sass不支持，必须升级到sass（Dart Sass）
变量不是写完就完的事——真正麻烦的是当设计稿突然把圆角从 4px 改成 6px，你得确认所有用到 $radius-sm 的地方，包括那些藏在 @media 里、又经过 math.div() 计算的边距值。这时候没文档、没命名规范、没统一入口的变量体系，比重写还累。
