全局常量不能直接写进bem块内部，必须抽离到variables.scss等独立变量文件中统一管理，否则会导致块间复用困难、主题切换失控、夜间模式无法一致；$color-primary等原子级设计值须定义在variables.scss中，而$button-height等组件实现细节应留在_block.scss内用原子值计算得出。
全局常量不能直接写进 BEM 块内部，必须抽离到独立变量文件中统一管理；否则块间复用、主题切换、夜间模式都会失控。
为什么 $color-primary 不能定义在 button.scss 里
块级样式文件（如 button.scss、header.scss）只负责结构与行为，不承担颜色、间距、圆角等视觉规则的定义权。一旦把 $color-primary: #409eff 写进 button.scss，就会出现三个实际问题：
- 其他块（比如
input.scss）想用同一种主色，只能复制粘贴或 @import 该文件——但button.scss本质是组件样式，不是变量源 - 换主题时要改十几处
$color-primary，漏一个就导致按钮蓝、输入框紫 - Sass 编译器对重复
$var: value !default的处理不可靠，尤其跨@import链时容易覆盖失效
variables.scss 里该放什么、不该放什么
真正该放进 variables.scss 的，是项目级、设计系统级的原子值，不是组件级“经验参数”：
- ✅ 放：
$color-primary、$spacing-xs、$radius-sm、$z-index-dropdown - ❌ 不放：
$button-height、$header-font-size、$sidebar-width—— 这些属于组件内部实现细节，应留在各自_button.scss中用variables.scss的原子值计算得出 - ⚠️ 特别注意：
$namespace必须在这里定义，且加!default，例如$namespace: 'el' !default;，否则所有b()mixin 都会编译失败
如何让 Sass 变量在 BEM mixin 中安全生效
BEM mixin（如 b()、e()）本身不声明变量，但必须能读取全局变量。关键点在于导入顺序和作用域链：
-
@import 'variables';必须出现在所有@import 'mixins';和@import 'components/*';之前 - 不要在
b($block)内部写$color: $color-primary;—— 这会创建局部变量，后续e()调用时无法继承 - 正确做法：在
b()生成的选择器内直接引用$color-primary，Sass 会沿作用域链向上找到variables.scss中的定义 - 如果某块需要临时覆盖全局色值（比如营销页按钮），应在调用处用
with传参，而非重定义变量：@include b(button) with ($color-primary: #ff6b6b) { ... }
命名空间与变量耦合时最易忽略的陷阱
$namespace 看似只是字符串前缀，但它直接影响变量命名逻辑和主题包切换能力：
- 当项目要支持多套 UI 主题（如
el/neon/u），不能靠替换$namespace值来切换——因为所有变量名（$el-color-primary、$neon-color-primary）都得跟着变 - 真正可扩展的做法是：变量名保持中立（
$color-primary），通过 CSS 自定义属性桥接：:root { --color-primary: #409eff; }，再在b()里用var(--color-primary) - 如果你坚持用 Sass 变量做主题，那
$namespace就不该参与变量名拼接，而应只用于类名生成 —— 否则$el-spacing-md和$u-spacing-md本质是同一概念，纯属冗余
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
