scss 的核心价值在于支撑长期维护、多主题适配与跨团队协作的 ui 组件库；需语义化变量命名、map 管理主题、模块化责任边界、严格导入顺序及克制嵌套。
SCSS 不是“比 CSS 更高级”，而是为 UI 组件库这类**需要长期维护、多主题适配、跨团队协作**的场景，提供了更可控的抽象能力。纯 CSS 在单页小项目里够用，但一旦组件数量超过 20 个、主题变体超 2 套、设计师频繁调整设计 Token，css 就会开始反噬开发效率。
变量不是为了“写得少”，而是为了“改得准”
在组件库中，$primary-color 这类变量的真实价值不在定义那一刻，而在它被复用 57 次之后——你改一个值，所有按钮、输入框、标签、进度条的主色同步更新，且不会漏掉某个 .tag--outline 的边框色。
- 必须用
$前缀 + 语义化命名（如$spacing-xs而非$s1），否则半年后没人记得$c4是深灰还是禁用态背景 - 避免在
@mixin内部硬编码变量值，比如@mixin button-base { border: 1px solid #ccc; }—— 这等于把变量逻辑锁死了 - 颜色变量建议用 map 结构管理主题，例如
$theme-light: ( 'border': #e5e7eb, 'text-secondary': #6b7280 );，后续可通过map-get($theme-light, 'border')安全取值，不报错
模块化不是“拆文件”，而是“划责任边界”
一个 _button.scss 文件不该只放 .btn 样式，而应包含：$button-padding 变量声明、@mixin button-variant()、%button-reset 占位符、以及 .btn 自身规则。这样其他组件（比如 _dropdown.scss）才能安全地 @extend %button-reset 或 @include button-variant($size: sm)。
- 禁止在
main.scss中直接@import 'button'；应统一走@import 'core/index'入口，由core/_index.scss控制变量、工具、基础样式的加载顺序 -
_variables.scss和_functions.scss必须放在所有组件文件之前导入，否则@mixin里调用rem-calc(12px)会报Undefined mixin - 组件级文件名前加下划线（如
_input.scss），防止被 Webpack / Vite 误当入口自动编译成独立 CSS
嵌套和 &:hover 的真实代价：可读性 vs. 可调试性
嵌套让代码看起来“结构清晰”，但过度嵌套（>3 层）会让开发者难以判断最终生成的选择器权重，也增加 DevTools 中定位样式来源的跳转成本。
- 组件内部允许嵌套，但仅限于逻辑强关联的子元素，例如
.card__header→.card__title；禁止出现.card .list .item .link这类跨域嵌套 -
&:hover、&:focus等伪类必须与父选择器在同一缩进层级，不要写成& { &:hover { ... } }—— 这会让生成的选择器变成.btn &:hover，实际无效 - 嵌套中慎用
&拼接类名，如&--large；若组件支持 BEM 风格，优先用@at-root提升作用域：@at-root .btn--large { ... }
@mixin”，而是变量命名是否收敛、@import 顺序是否稳定、嵌套深度是否有人敢动。这些细节不体现在文档里，却天天在 PR Review 中被反复指出。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
