Question

示例代码（我知道它可以被重写以避免级联，但我将其编写为示例。这段代码不是真正的问题，我可以用另一种方式解决，它只是插图）：

.b-list {  
  //…

  &__item {
    //…
  }

  &__link {
    height: 4px;
    //…

    @at-root .b-list__item.-active & {
      height: 12px;       
    }     
  }
}

编译为：

.b-list__link {
  height: 4px;
}

.b-list__item.-active .b-list__link {
  height: 12px;
}

我想更改选择器@at-root .b-list__item.-active &
像@at-root &__item.-active & {…}这样的东西避免重复父类名，但它在Sass中不起作用：

此代码不起作用：

.b-list {  
  //…

  &__item {
    //…
  }

  &__link {
    height: 4px;
    //…

    @at-root &__item.-active & {
      height: 12px;       
    }     
  }
}

那么，有办法做我想做的事吗？

Answer 1

有一些方法可以在没有@at-root样式函数的情况下实现您正在寻找的代码。然而，由于这是原始问题，以下应该可以解决问题。

您可以将&应用于变量，然后通过嵌套将其作为类名的一部分进行转义，如下所示：

.b-list {
    $rootParent: &;
    &__link {
        height: 4px;

        #{$rootParent}__item.-active & {
            height: 12px;
        }
    }
}

似乎绝对疯狂，但它确实有效！

如果您希望以更标准化的方式重新创建上述内容，我肯定会推荐以下内容：

.b-list {
    &__link {
        height: 4px;
    }

    &__item.-active &__link {
        height: 12px;
    }
}

还值得阅读http://sass-guidelin.es/#selector-nesting，特别是有关使用&当前选择器参考的BEM命名的部分，其中指出：

虽然这可能是轶事，但从当前选择器引用（＆amp;）生成新选择器会使这些选择器在代码库中无法搜索，因为它们本身不存在。

Answer 2

通常的做法是使用分配了块名称的“root”变量，但我发现它不是很优雅，所以要构建一个名为superbem的简单库。这是一些Sass mixins，可以帮助您以声明的方式坚持BEM命名。你的例子看起来像这样：

@include block(b-list) {
    @include element(link) {
        height: 4px;
    }

    @include element(item) {
        &.-active {
            @include element(link) {
                height: 12px;
            }
        }
    }
}

如何避免在BEM级联中重复父类名？

2 个答案: