如何用SCSS混入简化CSS的BEM代码？-css教程-PHP中文网

@at-root #{&}__element是唯一安全生成bem类名的方式，因&代表完整父选择器字符串，纯嵌套会产出带空格的后代选择器.card .card__title，违背bem扁平化要求；必须提级至根作用域才能生成正确单类名.card__title。

如何用scss混入简化css的bem代码？

为什么直接用 &__element 会编译出后代选择器

SCSS 的 & 代表当前完整选择器字符串，不是“块名”本身。写 .card { &__title { color: red; } }，& 是 .card，但 SCSS 嵌套逻辑会把它当作父级上下文，最终输出 .card .card__title（带空格），而 BEM 要的是单类名 .card__title。这不是 bug，是嵌套机制的默认行为——它天生表达 DOM 层级关系，但 BEM 要的是扁平命名。

@mixin b() 和 @mixin e() 怎么写才不破坏 BEM 语义

混入必须把元素和修饰符提级到根作用域，否则嵌套层级会污染类名生成逻辑。常见错误是把 &__icon 写在 .button:hover 里面，结果产出 .button:hover__icon 这种非法名。

@mixin b($name) { $B: "block-#{$name}"; .#{$B} { @content; } } —— 块定义本身不依赖 &，安全
@mixin e($el) { @at-root #{&}__#{$el} { @content; } } —— 必须用 @at-root 提级，& 才能正确解析为块名
@mixin m($mod) { @at-root #{&}--#{$mod} { @content; } } —— 同理，修饰符永远和块同级，不能进子选择器
如果混入里用了伪类（如 &:hover），就别再在里面调 @mixin e()，& 已经变成 .btn:hover，拼出来就是 .btn:hover__text

变量块名 + 循环生成元素类时，为什么 & 会失效

循环内部的 & 指向的是循环外最近的父选择器，不是循环变量。写 .card { @each $part in ("header", "footer") { &__#{$part} { } } }，& 仍是 .card，但整个规则被包裹在 .card { } 块里，编译后实际是 .card .card__header。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

正确做法：先声明块名变量，再拼接全名：$block: "card"; @each $part in ("header", "footer") { .#{$block}__#{$part} { } }
或显式提级：.card { @each $part in ("header", "footer") { @at-root .card__#{$part} { } } }
不要用 @for 遍历元素名——它生成数字索引，BEM 元素名是语义字符串，必须用 @each
修饰符列表必须是字符串字面量：@each $mod in ("primary", "disabled") { .btn--#{$mod} { } }，不加引号会报 Undefined variable "$primary"

混入里用插值拼接 __ 和 -- 时，连字符位置怎么不写错

- 在 SCSS 中不是字符串连接符，"btn"__"icon" 直接语法报错。拼接必须靠插值，且两端都得是字符串类型。

✅ 正确：.#{$block}__#{$element}（两个插值都是字符串）
⚠️ 危险：.#{$block}__#{$element}-active —— -active 可能被解析为减法，应写成 .#{$block}__#{$element}--active 或 .#{$block}__#{$element}-#{"active"}
❌ 错误：.#{$block}__icon 看似没问题，但如果 $block 未定义，编译失败；不如统一用插值保证一致性
命名空间拼接也同理：$ns: "xm"; $block: "button"; .#{$ns}-#{$block}__icon，中间的 - 是字面量，不是运算符