SCSS 的核心价值是保障大型项目维护安全而非提升书写体验。需用 @use 实现作用域隔离、$变量编译期校验、map-get() 主题安全取值，并严格规范嵌套、mixin 参数校验与文件加载顺序。
$primary-color 改一处，57 个组件自动同步更新；@use 能在构建时就发现循环依赖；@mixin 里传错参数，编译期不报错但生成无效 CSS——这些不是“功能强”，而是大型项目里每天真实发生的维护成本问题。SCSS 不是让写 CSS 更爽，是让改 CSS 不崩。
变量跨文件复用必须靠 @use + 命名空间，@import 会静默污染全局
原生 CSS 的 --color-primary 只能在 :root 或元素上声明，没法在 @media 里参与 lighten() 计算，也不能用在 @if 判断里。$primary-color 是编译期常量，哪儿都能用，但前提是变量得被正确加载：
-
@import会把所有变量、函数、mixin 全部注入全局，_button.scss里定义的$spacing-xs和_form.scss里同名变量会互相覆盖，且无提示 - 必须用
@use 'variables' as theme;，然后写background-color: theme.$color-primary;，作用域隔离才成立 - 所有变量统一收口到
_variables.scss，命名带前缀如$theme-color-primary、$layout-spacing-base，避免$red这种歧义名 - Vite/Webpack 项目里
@use报Unknown at rule @use？八成是还卡在node-sass（已废弃），运行npx sass --version确认是 Dart Sass 1.70+ 版本
嵌套超过 2 层就该拆，否则生成的选择器权重失控且 sourcemap 失效
写 .card { .header { .title { } } } 看着结构清晰，但编译后是 .card .header .title，权重高、难覆盖，HTML 里加个 wrapper 就断链。更麻烦的是：
- 浏览器 DevTools 点不到原始 SCSS 行号，sourcemap 在深度嵌套下大概率失效
-
&:hover必须和父选择器同级缩进，写成& { &:hover { } }会生成无效的.btn &:hover - 允许嵌套，但只用于逻辑强关联子元素，比如
.card__title和.card__content；跨组件或跨语义层级（如.card .list .item）一律禁用 - 真要提升层级，用
@at-root，别靠多层嵌套硬扛
@mixin 和 @extend 不能混用，输出结果完全不同
@mixin button-variant($size) 是复制粘贴代码块，@extend %button-reset 是合并选择器列表——选错直接导致 CSS 体积膨胀或样式污染：
- 用
@extend %clearfix给 50 个类扩展，编译出.a, .b, .c, ..., .z::after这种超长选择器，gzip 后体积多出 20%+ -
@mixin内部必须做参数校验：@if not (type-of($size) == string)，否则@include button-variant(42)编译通过但生成font-size: 42这种无效 CSS - 占位符
%text-truncate只能含纯样式声明，不能含&或伪类；带逻辑的复用一律走@mixin - 组件级文件（如
_button.scss）应包含变量、@mixin、%placeholder和主规则，方便其他模块安全调用
主题切换不是换几个变量，而是靠 map + map-get() 实现安全取值
设计系统有深色/浅色/高对比三套主题时，硬写 $color-bg: #fff; $color-bg-dark: #111; 会很快失控。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
$theme-light: ('bg': #fff, 'text': #333); $theme-dark: ('bg': #111, 'text': #eee);定义主题 map - 取值统一用
map-get($theme-light, 'bg')，没这个 key 就编译报错，不会静默 fallback 到 undefined - 变量文件
_variables.scss和函数文件_functions.scss必须在所有组件文件之前@use，否则rem-calc(12px)这类工具函数调用直接失败 - 组件文件名加下划线（
_input.scss），防止 Webpack/Vite 误当入口文件单独编译
@use 和 map-get() 就只是语法，不是工程保障。 
