如何在Sass中快速书写BEM类名_利用CSS预处理器的父选择器&符号-css教程-PHP中文网

直接用&__item会失效，因&仅代表当前选择器的直接父级而非任意祖先；正确做法是每个Block独立声明，子元素和修饰符均用&__或&--派生，禁止跨Block嵌套或重复写全类名。

如何在sass中快速书写bem类名_利用css预处理器的父选择器&符号

为什么直接用 `&` 写 `&__item` 会失效

因为 & 只代表**当前选择器的直接父级**，不是“任意上层祖先”。比如你在 .header-nav 规则里写 &__link，Sass 会编译成 .header-nav__link，而不是你想要的 .header__link——这违反了 BEM 中“元素必须严格归属某个 Block”的语义约束。

常见错误现象：

样式没生效，检查生成的 CSS 类名发现前缀错位
嵌套层级一深，& 就开始“指错爹”
在伪类（如 :hover）、兄弟选择器（如 ~）里误用 &__xxx，产出非法类名

怎样用 `&` 正确生成 `.block__element` 和 `.block--modifier`

核心原则：每个 Block 必须独立声明，所有子元素和修饰符都从它出发派生，不跳级、不跨 Block。

正确写法示例：

@include b(card) {
  // 生成 .card
  &__title { /* .card__title */ }
  &__image { /* .card__image */ }
  &--featured { /* .card--featured */ }
  &__image--rounded { /* .card__image--rounded */ }
}

关键点：

&__xxx 只能在顶层 @include b(xxx) 块内使用
禁止在 &:hover 或 &.is-active 里再写 &__xxx，否则变成 .card.is-active__xxx
需要组合状态 + 元素时（如 hover 下的某个元素），应改用独立规则或 @at-root 提升作用域

什么时候必须放弃 `&`，改用 `@mixin e()` 和 `@mixin m()`

当你要在修饰符内部、伪类、兄弟选择器等非顶层上下文中引用元素或修饰符时，& 的绑定就不可靠了。这时混入（mixin）是唯一可控的方式。

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

典型场景：

&--dark { @include e(content) { color: white; } } → 输出 .block--dark .block__content，而非 .block--dark__content
&:hover { @include e(button) { opacity: 0.8; } } → 正确生成 .block:hover .block__button
&__header + &__footer { margin-top: 1rem; } → 这里 & 指向的是同一个父级，但两个 &__xxx 是并列关系，不能靠单个 & 表达

基础 mixin 定义（精简版）：

$element-separator: '__';
$modifier-separator: '--';
<p>@mixin e($name) {
@at-root {</p><h1>{& + $element-separator + $name} { @content; }</h1><p>}
}</p><p>@mixin m($name) {
@at-root {</p><h1>{& + $modifier-separator + $name} { @content; }</h1><p>}
}</p>