SASS BEM擴展

Question

我試圖用sam使用bem語法，但是我遇到一個問題。

下面是代碼：

<button name="button" class="button button__call--full">Call</button> 



    $color__primary : #23ae4b; 
    $color__secondary : #1976d3; 

    //////////////////// 
    // Placeholder // 
    //////////////////// 

    %button { 
     background: #45beff; 
     border: none; 
     padding: 5px 8px; 
     font-size: 16px; 
     border-radius:3px; 
     color:#fff; 

     &:hover { 
     opacity: 0.75; 
     } 
    } 

    //////////////////// 
    // Styling  // 
    //////////////////// 

    .button { 
     @extend %button; 

     &__call { 

     box-shadow: 
     0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2); 
     padding:5px 30px; 
     position: relative; 

     &--full{ 
      background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary; 
     } 


     } 

    } 

當我的CSS編譯我有這樣的：

.button__call { 
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2); 
    padding: 5px 30px; 
    position: relative; } 
.button__call--full { 
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; } 

，我想有這樣的：

.button__call { 
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2); 
    padding: 5px 30px; 
    position: relative; } 
.button__call--full { 
      box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2); 
    padding: 5px 30px; 
    position: relative; 
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; } 

事實上，延伸當我有一個修飾符時，從我的阻止按鈕，我想要所有樣式，修飾符和元素。我不想這樣做：

<button name="button" class="button button__call button__call--full">Call</button> 

Answer 1

爲了模擬第二輸出則需要使用下面的聲明

.button { 
    @extend %button; 

    &__call, 
    &__call--full { 
     box-shadow: 
     0 0.150em 1px hsl(100, 80%, 30%), 0 0.5em 5px rgba(0, 0, 0, 0.2); 
     padding:5px 30px; 
     position: relative; 
    } 

    &__call--full { 
     background: url("../../static/images/arrow.png") no-repeat 96% 52% $color__secondary; 
    } 
} 

每次使用&時間它抓住嵌套選擇片段的鏈，並建立與所述一個完全新的頂部電平選擇它找到的位。然後它將該sass選擇器中的所有屬性添加到css選擇器中。

但是，這並不是真正正確地使用BEM，您已經不必要地複製了樣式，修改器在與&一起構建時應該真的降低一級。你列出的sass實際上是正確的，模塊，後面是元素，後面跟着嵌套順序中元素的任何修飾符，每個&的行爲都應該如此。

您應該使用父類和修飾符類來收集所有樣式（默認和修改）。就像這樣：

<div class='button__call button__call--full'></div> 

這樣你已經建立了上海社會科學院，與BEM建設時，這是比較正確的將元素

Answer 2

對不起，我沒有幫助。當然，您可以使用Sass和BEM方法。我只是想指出，使用& __和& - 你失去了你的代碼的可讀性。

我不知道是多麼強大的BEM的理解，但你應該創建您的標記和類這樣的：

<button name="button" class="button button--full">Call</button> 

和

.button { 
    box-shadow: 0 0.15em 1px #388a0f, 0 0.5em 5px rgba(0, 0, 0, 0.2); 
    padding: 5px 30px; 
    position: relative; 
} 
    .button--full { 
    background: url("../../static/images/arrow.png") no-repeat 96% 52% #1976d3; 
    } 

希望這一個幫助。