推荐用@use替代@import，统一收口变量至_variables.scss并加命名空间前缀（如$theme-color-primary），通过@use 'variables' as theme;按需加载，实现作用域隔离，避免隐性覆盖。
SCSS变量怎么避免命名冲突和全局污染
大型项目里，$color-primary 这类变量容易在多个模块中重复定义，编译时后定义的会覆盖前定义的，但开发者往往察觉不到。这不是语法错误，而是隐性维护风险。
推荐做法是：所有变量统一收口到 _variables.scss，用命名空间前缀（如 $theme-color-primary、$layout-spacing-base），并配合 @use（而非 @import）按需加载：
@use 'variables' as theme;
.button { background-color: theme.$color-primary; }
注意：@use 是 Dart Sass 2.0+ 的默认推荐方式，它天然隔离作用域；而旧式 @import 会把所有变量注入全局，跨文件修改极易失控。
嵌套层级超过3层就该警惕了
SCSS嵌套写起来很爽，但 .page .header .nav .item .link:hover 编译出来就是深度选择器，不仅影响性能，还破坏 CSS 的低优先级设计原则——它会让后续样式覆盖变得异常困难。
立即学习“前端免费学习笔记（深入）”；
实际项目中建议：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 嵌套最多保留 2 层（如
.card { &__title { } &__content { } }） - 用 BEM 命名规范替代深层嵌套，比如
.card-title而非.card .title - 对伪类/伪元素用
&:hover、&::before，别再嵌套一层选择器进去
过度嵌套还会让 sourcemap 调试失效，浏览器开发者工具里点不到原始 SCSS 行号。
混合器（@mixin）传参不校验，运行期才报错
@mixin flex-center($direction: row) 看似安全，但如果调用时传了 @include flex-center(42)，Sass 编译器不会报错，但生成的 CSS 是无效的：flex-direction: 42。这类问题上线后才暴露，排查成本高。
工程化建议：
- 在 mixin 内部用
@if not (type-of($direction) == string)做基础类型检查 - 对关键参数（如颜色、尺寸）用
lighten()、px等函数做兜底转换 - 避免在 mixin 中拼接选择器（如
#{&}--disabled），这会破坏 CSS 模块化隔离
Vite/Webpack 里启用 @use 需要确认 Sass 版本
很多团队升级 Vite 后发现 @use 报错 Unknown at rule @use，根本原因是构建工具里内置的 Sass 版本太老。Vite 5+ 默认用 Dart Sass，但某些插件或缓存可能仍绑着 Node Sass（已废弃）。
验证和修复步骤：
- 运行
npx sass --version，确保输出类似1.77.6（Dart Sass）而非4.14.1（Node Sass） - 删掉
node_modules和package-lock.json，重装sass（不是node-sass） - Webpack 项目还需检查
sass-loader版本是否 ≥ 13.3.0，否则不支持@use的新语法
真正麻烦的不是语法写不对，而是不同环境 Sass 引擎不一致——开发机跑得通，CI 构建却失败，这种差异最容易被忽略。
