使用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` */ 
     } 
    } 
} 

希望這有助於以某種方式！