BEM mixin需拆分为b()、e()、m()三个独立宏，通过$namespace动态拼接类名、&确保作用域正确、@content注入样式，避免单宏封装导致语义模糊与层级断裂。
直接用 @mixin 封装 BEM 的块（block）、元素（element）、修饰符（modifier）三类结构，能避免手写重复类名、减少拼写错误、统一命名空间，但必须配合 $namespace 和 & 父选择器才能真正落地。
怎么定义一个可复用的 BEM 块混合宏
核心是把命名空间、分隔符、块名拼成完整类名，并用 .#{$B} 动态生成选择器。不能硬编码 .btn 这类名字，否则无法跨组件复用。
-
$namespace必须提前在全局变量中定义（如$namespace: 'u'），所有 BEM 混合宏都依赖它 - 使用
@content接收嵌套样式，而不是在 mixin 里写死规则，否则无法支持任意内部结构 - 别漏掉
#{$B}的插值语法——写成.u-button是静态的，.#{$B}才能随参数变化
示例：
@mixin b($block) {
$B: $namespace + '-' + $block;
.#{$B} {
@content;
}
}
调用：@include b(button) { color: red; } → 编译出 .u-button { color: red; }
立即学习“前端免费学习笔记（深入）”；
如何用 & 在 mixin 中安全处理元素和修饰符
BEM 元素（__）和修饰符（--）必须基于当前块作用域生成，否则会脱离上下文。Sass 的 & 是唯一可靠方式，它代表外层选择器，不是字符串拼接。
- 元素 mixin 内部必须写
'__' + $element，不能写$B + '__' + $element——后者会丢失嵌套层级 - 修饰符同理：
'--' + $modifier才能保证最终是.u-button--large，而不是孤立的.u-button--large - 禁止在 mixin 里用
@at-root提升作用域，那会让 BEM 结构断裂
示例：
@mixin e($element) {
&__#{$element} {
@content;
}
}
.u-button {
@include e(icon) { width: 16px; }
}
→ 编译出 .u-button__icon { width: 16px; }，不是 .u-button__icon 独立存在
为什么不能把 BEM 逻辑全塞进一个 mixin 里
常见错误是写一个巨无霸 @mixin bem($block, $element: null, $modifier: null)，靠条件判断输出不同结构。这会导致三个问题：
- 调用时语义模糊：
@include bem('button', 'icon')和@include bem('button', null, 'large')容易传错位置 - 无法嵌套：BEM 元素必须出现在块内部，但单 mixin 无法表达「先有块、再在其内加元素」的层级关系
- 调试困难：编译后 CSS 类名来源不清晰，不知道是哪个
@include产出的
正确做法是拆成 b()、e()、m() 三个独立 mixin，按需组合。它们职责单一，调用顺序即 DOM 层级。
哪些 BEM 场景容易踩坑
最常被忽略的是状态类（如 is-active）和响应式修饰符（如 u-button--sm@md）的封装方式。
- 状态类前缀（
$state-prefix: 'is-'）必须参与拼接，且要保留&上下文，否则&.is-active会变成孤立选择器 - 响应式修饰符不能靠
@media直接包在 mixin 里——它会让调用点不可控；应封装为@mixin m-responsive($breakpoint)，由使用者决定嵌套位置 - 别在 mixin 中用
@extend复用 BEM 占位符——它会破坏类名结构，导致.u-button, .u-input { ... }这类跨块合并，丧失 BEM 可读性
BEM Mixin 不是语法糖，它是对 CSS 类名生成逻辑的显式声明。一旦命名空间或分隔符变更，所有调用点都会同步更新——这点只有严格遵循 & 和 @content 才能守住。
