SCSS + BEM風格的兒童結構，當父母有變色劑

請問可以設置scss元素內部 - 被包圍嗎？我不想使用.box__something，但我需要修改的孩子，是依賴於父修改SCSS + BEM風格的兒童結構，當父母有變色劑

<div class="box"> 
    <div class="box__something">Hello</div> 
</div> 
<div class="box box--rounded"> 
    <div class="box__something">Hi</div> 
</div> 

.box { 
    &__something { 
     background: blue; 
    } 
    &--rounded { 
     background: green; 

     .box__something { // <<< Is some better selector? 
      background: pink; 
     } 
    } 
}

來源

2016-12-16 Dawe

Sass沒有任何偉大的內置解決方案來解決您的問題，這是一個已經被多次探索的問題。然而，您可以通過使用&助手加入您希望加入的課程，以稍微不雅的方式獲得您所期望的結果。我已包括一個生活example here。

雖然這工作，你必須明白，如果你想樣式化.box--rounded類，如下圖所示，直接你必須有它，它自己的類中，你不能說我們已經把&__something在後&類中使用它。

我建議你和我的sassmeister要點一起玩，看看你能想出什麼結果。

.box { 
    &__something { 
     background: blue; 
    } 
    &--rounded { 
     background: green; 
    } 
    &--rounded & { 
     &__something { 
     background: pink; 
    } 
    } 
}

我希望這能解決您的問題。

來源

2016-12-16 12:45:16 shaune

謝謝。看起來很棒，我可以添加更多的選擇器，然後__something。 – Dawe

的修改不應該對父被使用，並且子元素.box__something

來源

2016-12-16 10:02:38 Alex

如果我理解你的問題正確，我感到你的痛苦！只要嵌套屬性&更改爲父級。

但是，您可以緩存原來的類名作爲像這樣的變量：

$box: box; 

.#{$box} { 
    .#{$box}__something { 
     background: blue; 
    } 
    .#{$box}--rounded { 
     background: green; 

     .#{$box}__something { // <<< Is some better selector? 
      background: pink; 
     } 
    } 
}

上述的方法唯一的問題是，你最終編譯CSS的體積較大。這使得到：

.box .box__something { 
    background: blue; 
} 
.box .box--rounded { 
    background: green; 
} 
.box .box--rounded .box__something { 
    background: pink; 
}

爲了減少輸出的大小，你可以用變量的方法，像這樣結合&：

.box { 
    $box: &; 
    &__something { 
     background: blue; 
    } 
    &--rounded { 
     background: green; 

     #{$box}__something { 
      background: pink; 
     } 
    } 
}

這使得到：

.box__something { 
    background: blue; 
} 
.box--rounded { 
    background: green; 
} 
.box--rounded .box__something { 
    background: pink; 
}

這樣，你可以更改變量中的類名並且所有內容都會更新，我也認爲它讀得更好一點。

來源

2016-12-16 10:35:51

SCSS + BEM風格的兒童結構，當父母有變色劑

回答

相關問題