因为@use默认启用模块作用域，变量不会自动注入全局，必须通过命名空间访问（如variables.$color-primary）或使用别名（如@use "variables" as v → v.$color-primary），且文件名须以下划线开头（如_variables.scss）。
为什么@use后变量报错：$color-primary is undefined
因为 @use 默认启用模块作用域，变量不会自动注入全局。你写了 @use "variables"，但直接写 color: $color-primary 就会报错。
必须显式访问命名空间：color: variables.$color-primary；或者用别名避免长前缀：@use "variables" as v → v.$color-primary。
- 别用
as *提升所有变量到全局——看似省事，实则埋下冲突雷（比如两个模块都定义了$spacing） - 所有 Sass 模块文件名必须以下划线开头（如
_variables.scss），否则会被当作入口文件单独编译，导致重复输出 CSS - 路径必须相对入口文件（如
main.scss）正确；Sass 不会自动补.scss后缀，但会尝试匹配_xxx.scss和xxx.scss
嵌套超过 3 层时，浏览器样式匹配明显变慢
Sass 嵌套只是语法糖，最终输出仍是标准 CSS。浏览器从右向左匹配选择器，.page .section .block__item:hover 比 .block__item:hover 多做两次祖先节点回溯，DevTools 的 “Recalculate Style” 时间会上升，Lighthouse 也会警告 “Avoid large layout shifts”。
- 超过 3 层嵌套（如
.page { .section { .block { &__item { } } } }）基本属于反模式 - 推荐平铺 + BEM：
.block__item { }、.block__item--hover { }，靠命名和引入顺序控制优先级，不靠嵌套提特异性 -
&:hover { .icon { opacity: 0.8; } }输出为.block:hover .icon；若.icon全局唯一，应直接写.icon:hover
sass --watch 卡住的真正原因不是“文件多”，而是路径扫描失控
默认行为会递归扫描整个 node_modules 和 dist 目录，哪怕只改了一个 _mixins.scss，它也会重新遍历所有 @use 或 @forward 的依赖图——尤其当存在深层转发链时，解析耗时指数上升。
立即学习“前端免费学习笔记（深入）”；
- 加
--no-source-map关闭源码映射（开发阶段非必需） - 显式指定路径：
sass --watch src/scss/main.scss:dist/css/main.css，禁用通配符扫描 - 检查
includePaths配置是否混入了node_modules根目录——这是最常被忽略的性能黑洞 - 第三方库（如
bootstrap/scss/）提前编译成 CSS 引入，别让 sass 每次重跑它们
多个入口文件（admin.scss / landing.scss）重复输出 button 样式
@use 是静态合并，构建工具（Webpack/Vite）默认会在每个输出 CSS 中完整复制所引用模块的内容。如果你在两个入口里都写了 @use "sass/components/button"，button 的 CSS 就会出现两份。
- 入口文件只
@use真正需要的最小粒度模块，例如@use "sass/elements/button"，而不是@use "sass/components"（后者可能含 modal/dropdown 等无关样式） - 启用构建工具的 CSS 分片能力：Webpack 需配置
splitChunks，Vite 需开启cssCodeSplit: true - Bootstrap-sass 场景下，
$enable-modals: false无法阻止 mixin 被调用，必须跳过整行@import "bootstrap/modal" - 禁止在
@use链路中出现循环依赖，Dart Sass 会直接报Compilation error: Circular dependency
