css - 如何避免在BEM级联中重复父类名?

css - 如何避免在BEM级联中重复父类名?,第1张

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

.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;       
    }     
  }
}

那么,有办法做我想做的事吗?

最佳答案:

2 个答案:

答案 0 :(得分:3)

有一些方法可以在没有@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命名的部分,其中指出:

  

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

答案 1 :(得分:0)

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

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

    @include element(item) {
        &.-active {
            @include element(link) {
                height: 12px;
            }
        }
    }
}
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复