魔法数字在BEM+Sass项目中更危险，因其破坏结构隔离与编译约束；必须用语义化Sass变量统一管理原子值，并严格限定作用域与引用方式。
直接在 CSS 里写 12px、0 2px 4px rgba(0,0,0,.1) 或 z-index: 999，不是“手快”，是给后续所有人埋雷——改一个值要全局搜、不敢删、上线后某处圆角突然变直，八成是某个没命名的 8px 被误删了。
为什么魔法数字在 BEM + Sass 项目里更危险
BEM 提供结构隔离，Sass 提供编译期约束，但两者都救不了裸写的数值。常见现象：
- 同一个圆角在
.card__header写border-radius: 8px，在.btn里又写border-radius: 8px，看起来一致，实则毫无关联——改设计稿要求统一为6px时，你得手动翻 17 个文件 -
z-index: 1000出现在弹窗、下拉、Tooltip 里，但没人知道哪个该优先，也没法校验是否越界 -
margin-bottom: 24px在表单字段和卡片之间复用，结果改卡片间距时把表单撑开了
根本问题不是“写了数字”，而是这些数字没有归属、不可追溯、无法被工具识别。
用 Sass 变量接管所有原子级数值
只在 _variables.scss 中声明语义化变量，且仅限原子值（不带单位组合、不带业务逻辑）：
- 圆角：
$radius-sm: 4px、$radius-md: 8px、$radius-lg: 12px - 阴影：
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1)、$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1) - 层级：
$z-dropdown: 900、$z-modal-overlay: 1000（注意留间隙） - 间距：
$space-xs: 4px、$space-md: 16px（禁用$space-1这类无语义名）
关键约束：
- 所有组件内禁止直接写数值，必须用变量，如
border-radius: $radius-md - 变量只定义一次，不重复计算：
$radius-lg不应写成$radius-md * 1.5（Sass 不支持运行时单位运算） - 避免在 mixin 中硬编码数值，例如
@mixin button-base { padding: 12px 24px; }→ 应改为padding: $space-md $space-lg
BEM 类名里不塞数值，让变量管到底
BEM 的修饰符（--）只表达语义状态，不承担样式值职责：
- ❌ 错误：写
.button--size-large并在 CSS 里设font-size: 18px—— 这个18px就是新魔法数字 - ✅ 正确：保留
.button--large作为状态标识，实际字号由变量驱动：.button--large { font-size: $font-size-lg; } - ✅ 更优：用 CSS 自定义属性下沉，
.button { --button-font-size: var(--font-size-md); }，再由 JS 或 data 属性切换--button-font-size: var(--font-size-lg)
这样做的好处：
- DevTools 里能看到变量来源（悬停即跳转到
_variables.scss） - PurgeCSS 能安全剔除未使用的修饰符类名，而变量仍保留在编译后 CSS 中
- 换主题时只需改变量值，无需动任何 BEM 类名或 HTML
最容易被忽略的陷阱：变量作用域与构建链路
变量写了却没生效，90% 是路径或加载顺序问题：
- 确保
@use "variables"或@import "variables"出现在所有组件文件最顶部 - 用
@use时必须带命名空间，如@use "variables" as v;，然后写v.$radius-md；若漏掉v.，Sass 不报错但输出原样$radius-md - 检查编译后 CSS 是否真输出了数值——如果看到
border-radius: $radius-md，说明变量未解析，大概率是@use路径错误或文件未被引入 - VS Code 安装
Sass IntelliSense插件，悬停类名/变量可直接定位定义位置，比全项目搜索快十倍
真正的魔法数字清理，不在删代码，而在让每个数值都有名字、有归属、有校验路径——变量不是装饰，是 CSS 的类型系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
