SCSS 为解决 CSS 工程化短板而生：变量跨文件复用、嵌套可控性、Mixin/@extend 语义明确、模块化依赖可审计；其价值不在语法糖，而在支撑大型项目可维护性。
SCSS 不是“比 CSS 好”，而是为解决原生 CSS 在大型项目中暴露的工程化短板而存在的——变量不可跨文件复用、选择器重复冗长、样式逻辑无法抽象、主题切换成本高，这些才是真实痛点。
变量作用域与跨文件复用失效
原生 CSS Custom Properties（--color-primary）虽支持变量，但作用域绑定在元素上，无法在 @media 或 @keyframes 中直接参与计算；SCSS 的 $primary-color 是编译期常量，可出现在任意上下文，包括 @if 判断、lighten() 函数、@for 循环里。
- 常见错误：把
$spacing-xs: 4px定义在某个组件 SCSS 文件里，其他模块 import 后却报Undefined variable—— 忘记 SCSS 变量不自动提升，必须显式@import '_variables'或用@use 'variables' as *（Dart Sass 2.0+ 推荐） - 真实场景：设计系统中一套色板需同时用于按钮背景、文字高亮、边框阴影，SCSS 变量改一处，全项目响应；CSS 自定义属性需 JS 注入或依赖 :root 范围，主题切换时还得手动 patch 样式表
嵌套导致的选择器爆炸与维护陷阱
SCSS 嵌套本身不危险，危险的是开发者误以为“结构匹配 HTML 就等于语义正确”。nav ul li a:hover 编译后生成超长选择器，权重失控，且一旦 HTML 结构微调（比如加了 <div class="wrapper">），样式就断链。
<ul>
<li>容易踩的坑：<code>& 的使用被忽略。写 .btn { &:hover { ... } } 生成 .btn:hover；但写成 .btn { div:hover { ... } } 就变成 .btn div:hover，完全偏离本意
@at-root 提升关键选择器层级；复杂交互状态改用 BEM 命名 + 类名组合，而非靠嵌套模拟Mixin 与 @extend 的复用边界模糊
@mixin 和 @extend 都能减少重复，但语义和输出完全不同：@mixin 是复制粘贴代码块，@extend 是合并选择器。选错会导致 CSS 体积膨胀或样式污染。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
- 典型错误：用
@extend %clearfix给 50 个组件类扩展清除浮动，结果编译出.a, .b, .c, ..., .z::after这种超长选择器列表，既难调试又破坏 specificity 预期 - 使用场景差异：
@mixin responsive-font($base)适合带参数的动态逻辑；@extend %text-truncate仅适用于纯静态样式集合，且被 extend 的占位符（%开头）不能含&或伪类 - 兼容性注意：Dart Sass 已弃用全局
@extend（即不带%的普通类 extend），必须用占位符；旧 Ruby Sass 项目迁移时会报错
模块化依赖与构建链路强耦合
SCSS 的 @import 和 @use 看似只是文件拆分，实则把样式组织方式和构建工具深度绑定了。Webpack/Vite 的 sass-loader 默认支持 @import，但 @use 需要 Dart Sass 1.23+ 且配置 api: 'modern'。
- 常见故障：
@use 'utils/breakpoints'报File to import not found—— 路径没加_前缀（@use不自动识别 partial），或未在 webpack config 的includePaths中声明src/scss - 真实代价：团队从 CSS-in-JS 切回 SCSS 时，发现所有主题色变量分散在 JS 里，无法直接被
$color-brand消费，必须双写或引入postcss-simple-vars做桥接 - 关键提醒：SCSS 模块化不是“写几个 _xxx.scss 就完事”，它要求明确的依赖拓扑（如
_variables→_mixins→_components），否则@use循环依赖会直接中断构建
真正卡住大型项目的，从来不是语法糖多寡，而是变量能否贯穿设计系统、嵌套是否可控、复用机制是否可预测、模块加载是否可审计——这些细节在 PR Code Review 里几乎不会被提，但上线后会让重构成本翻倍。
