Sass变量命名应以可维护性优先，采用$color-blue-500、$space-md等带层级和单位的格式；嵌套不超过三层，超层用BEM平铺；mixins所有非核心参数须设默认值；全项目统一使用@use，禁用@import混用。
怎么给Sass变量起名才不会三个月后自己都懵
变量命名不是为了“语义化”而语义化，而是为了在$button-primary-bg和$blue-500之间，一眼看出哪个该改、哪个动了会牵连全局。
- 基础色、间距、圆角等基础值用
$color-blue-500、$space-md这类带层级和单位的命名，不写$main-blue——“main”是哪次迭代定的？谁还记得 - 组件级变量只出现在对应
_button.scss里，统一前缀$btn-，禁止跨文件复用$btn-height去控制input高度——它们视觉一致是巧合，逻辑无关 - 避免
$dark-mode-text这种绑定状态的变量名；改用$text-color-primary，靠body[data-theme="dark"]上下文切换值，否则暗色模式一加新组件就得补一堆变量
Sass嵌套到第几层就该停
嵌套超过三层，编译出的CSS选择器权重暴涨，且极易误删父级导致子样式全崩——这不是代码洁癖，是调试时真实发生的“删了一行，整个表单按钮变透明”。
- 纯结构嵌套（如
.card > .card__header > h3）最多两层，第三层开始用BEM式类名.card__title平铺替代 - 伪类/媒体查询算一层：
&:hover或@media (min-width: 768px)内部不再嵌套其他选择器 - 用
@at-root主动跳出嵌套比硬撑更安全，比如.modal内要重置body滚动条，直接@at-root body { overflow: hidden; }，别卡在.modal__overlay &里绕弯
mixins里哪些参数必须设默认值
没默认值的@mixin flex-center($direction)等于埋雷：调用时漏传$direction，编译报错Undefined variable "$direction"，但错误位置指向@include那行，根本看不出是mixin定义缺默认值。
- 所有非核心行为参数必须有默认值：
@mixin button($variant: 'primary', $size: 'md', $full-width: false) - 颜色类参数慎用
null当默认值——$color: null会导致if ($color) {...}永远为假，改用$color: inherit或$color: currentColor更符合CSS直觉 - 接受CSS属性值的参数（如
$padding）不要限制类型，允许传1rem、var(--space-lg)甚至calc(1rem + 1px)，强行@if type-of($padding) != 'number'会拦住合法用法
@import和@use混用时样式突然失效
@use是模块化语法，@import是旧式全局合并；两者混用时，@use引入的变量/mixin在@import文件里不可见，但@import里的!default又会覆盖@use的声明——结果就是样式随机丢失或颜色错乱。
- 全项目统一用
@use，旧_variables.scss改成@use "variables" as v;，调用写v.$color-primary - 第三方库（如Bootstrap Sass）若未提供
@use兼容版本，用@forward封装一层：@forward "bootstrap/scss/functions";，再@use "bootstrap" as bs; - 绝对不要在
@use之后写@import——即使它看起来“只是引入一个字体”，Sass会把@import内容注入到@use作用域之外，变量引用立刻失效
命名和嵌套规则容易写进文档，但@use和@import的加载顺序、变量作用域边界，才是上线前半夜还在查漏的点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
