大型前端团队必须用Sass而非原生CSS，因其@use、$variable和@mixin能解决3人以上协作与200+组件时的变量管理、样式复用及依赖追踪失控问题；原生CSS变量无法参与编译期计算或条件判断，而Sass变量是编译期常量，支持lighten()、@if等逻辑，且@use机制保障依赖清晰与循环检测。
大型前端团队不用原生 CSS，不是因为“炫技”，而是原生 CSS 在协作规模超过 3 人、组件数超 200 个时，变量管理、样式复用和依赖追踪会立刻失控——Sass 的 @use、$variable 和 @mixin 是唯一能兜住工程底线的方案。
变量跨文件复用必须靠 @use，不是 @import
原生 CSS 的 --color-primary 只能在运行时读取，不能用于 @media 内计算，也不能参与 lighten() 或 @if 判断；Sass 的 $primary-color 是编译期常量，哪儿都能用。但常见错误是把 $spacing-xs: 4px 定义在 _button.scss 里，其他文件 @use 后报 Undefined variable——Sass 变量不自动提升，必须显式 @use 'base/variables' as * 或带命名空间引入。
- 按用途拆分变量文件：
_colors.scss、_breakpoints.scss、_z-index.scss，避免全量注入 - Webpack 或 Vite 必须配路径别名（如
@/styles），否则@use '../../../styles/mixins'写到第 5 层就没人敢动 -
@import已被 Dart Sass 标记为遗留语法，它同步阻塞、无依赖审计，@use才支持循环检测（A → B → C → A 直接报错）
@mixin 参数必须显式命名，否则多人协作必踩坑
Less 的混合宏靠参数顺序隐式匹配，.shadow(1px, 0) 可能误赋给 @x 而非 @blur；Sass 的 @include shadow($blur: 2px, $x: 0) 强制命名绑定，顺序无关，缺参数直接报错 Invalid CSS after ""，IDE 补全也更准。
- 带默认值的 mixin 如
@mixin button($size: 14px, $variant: 'default')，调用时必须显式传参或全写，默认值不“自动兜底” - 可变参数支持
@mixin responsive-font($base, $args...)，Less 不支持 - Vue 单文件组件中，
@mixin比@extend %placeholder更安全：后者会合并选择器，导致.a, .b, .c::after这类长链，破坏 specificity 预期
嵌套深度超 3 层就该警觉，& 不是万能胶
Vue 的 scoped 机制靠属性选择器隔离样式，不用嵌套就得手动拼 .sidebar[data-v-abc] .menu[data-v-abc] .item[data-v-abc]；Sass 嵌套自动注入，结构对齐 HTML。但 & 绑定最近父级，写错一层就全偏：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
-
.btn { div:hover { ... } }编译成.btn div:hover，不是.btn:hover——漏写&是高频错误 - 嵌套超过 4 层（如
.layout .header .nav .item .link）会导致选择器过长，低配设备匹配变慢，gzip 后体积增加 15%~30% - 复杂 UI（弹窗套弹窗、表格行内操作）优先用
:deep()或拆子组件，别靠嵌套硬扛
主题切换和设计系统落地，只靠原生 CSS 变量根本跑不起来
设计系统换主题时，Sass 改一个 $theme，全项目编译后自动适配；CSS 自定义属性得靠 JS 注入 document.documentElement.style.setProperty('--bg', '#121212')，且媒体查询里无法响应——@media (prefers-color-scheme: dark) { body { background: var(--bg); } } 里的 var(--bg) 不会动态重算。
- Sass 支持
@if $theme == 'dark' { ... }和@for $i from 1 through 3 { .col-#{$i} { width: $i * 33.33%; } }，原生 CSS 无等价能力 - 移动端多主题场景下，
$theme-colors: ("light": #fff, "dark": #1a1a1a)配合 map-get() 提取，编译后零运行时开销 - JS 动态改样式必须用
--color，但主题逻辑（比如深色模式下所有按钮边框变细）只能靠 Sass 编译期生成，两者互补，不可替代
真正难的不是写 @mixin 或 @use，而是判断哪部分该交给编译期（Sass），哪部分留给运行时（CSS 变量）——混用边界模糊时，样式行为就既不可预测，又没法 debug。
