使用BEM +萨斯家长选择到目标修饰的子元素无

Question

我使用的是青菜和我用BEM的符号重复父选择，例如，重复的类名 -

.c-block { 
background:red; 
&__element {font-size:14px;} 
&--modifier {background:blue;} 
} 

此输出 -

.c-block { 
    background: red; 
} 
.c-block__element { 
    font-size: 14px; 
} 
.c-block--modifier { 
    background: blue; 
} 

这使得将来更新班级名称更加简单 - 在一个地方更改并排序！

现在事情变得与修饰更复杂和定位自己的孩子：

.c-block { 
    background:red; 
    &__element {font-size:14px;} 
    &--modifier {background:blue; 
    .c-block__element {font-size:20px;}  
    } 
} 

注意如何我不得不重复类名“.C-块”。有什么办法可以避免这种情况？我只想拥有一个类名声明，它可以在我的样式中引用，并且很容易在一个地方进行更改。

是否使用变量避免类名称重复的唯一方法？例如 -

.c-block { 
    $class: c-block; 

    background:red; 
    &__element {font-size:14px;} 
    &--modifier {background:blue; 
    & .#{$class}__element {font-size:20px;} 
    // the above line = .c-block--modifier .c-block__element 
    } 
} 

我一直在想，必须有一些更好的sass + BEM方法来做到这一点，而不是使用变量。

Answer 1

作为与SASS一起使用BEM的人，您的问题让我感到好奇，并且在快速谷歌后发现了以下文章（关于CSS技巧），here是它的链接。而不是使用变量，我们可以创建混入，以帮助实现你想要什么，就像这样：

/// Block Element 
/// @access public 
/// @param {String} $element - Element's name 
@mixin element($element) { 
    &__#{$element} { 
     @content; 
    } 
} 

/// Block Modifier 
/// @access public 
/// @param {String} $modifier - Modifier's name 
@mixin modifier($modifier) { 
    &--#{$modifier} { 
     @content; 
    } 
} 

然后，您可以像输出你的SASS这样：

.block { 
    /* CSS declarations for `.block` */ 

    @include element(element) { 
     /* CSS declarations for `.block__element` */ 
    } 

    @include modifier(modifier) { 
     /* CSS declarations for `.block--modifier` */ 

     @include element(element) { 
      /* CSS declarations for `.block--modifier__element` */ 
     } 
    } 
} 

希望这有助于以某种方式！