SCSS嵌套語法：巢父母毗

類

我想輸出： .selector.another-selector .selector__block{some declaration} ，但我想窩吧：
我使用&末，所以我可以嵌套其下__block，但我怎樣才能使它與.selector相鄰？
代碼示例：SCSS嵌套語法：巢父母毗

.selector{ 
    &__block{ 
    // i want to put my .another-selector declaration here 
    .another-selector &{ 
    //syntax issue 
    //need to make it .selector.another-selector .selector__block 
    } 
}

在此先感謝。

來源

2017-07-18 Yonatan Lev Ari

如果您嵌套您的選擇器，那麼它必須位於.selector__block上下文中（&）。

你有2個解決方案，在這裏：

您可以重複第一選擇，因爲這樣的：

.selector { 
    &__block { 
     ... 
     .another-selector.selector & { 
      // Here `&` means `.selector__block` 
     } 
    } 
}

可以嵌套不同：

.selector { 
    &__block { 
    ... 
    } 
    &.another-selector &__block { 
    // Here `&` means `.selector` 
    } 
}

也許第二個解決方案是因爲更好它尊重inception rule並且更少依賴於DOM結構。

順便說一句，你也可以嘗試https://www.sassmeister.com/你選擇

來源

2017-07-18 09:09:35 Tibo

由於某種原因，這個投票得票？我同意Tibo（解決方案2） - 不要過分複雜的東西 –

嵌套BEM通常是過於複雜的事情。如果你需要聲明'＆.another-selector＆__ block'，那麼解決方案二是一個很好的解決方案，如果你有一個真正的項目被維護而不是一個hello世界，那麼不是那麼簡單嗎？ –

這是一個維護任務。不能重新編寫代碼。只是想組織它。無論如何，這個解決方案是好的，經過一番思考，我同意在這裏嵌套太多是不好的。謝謝 –

打，我建議你不要窩在BEM所有。只是爲了兩個有效的原因與簡單的聲明。

1）錯誤跟蹤嵌套的BEM很難，假設你從devtools獲得一個類，它是.hero__heading。在執行搜索時，這不會匹配代碼中的任何內容。現在上面的例子不難搞清楚，但是繼承一個嵌套結構的項目是一件痛苦的事情。 我建議閱讀Harry Roberts article on code smells in css

2）像這樣的嵌套往往會複雜，當想要覆蓋其他類像你的情況。

考慮以下代碼：

.selector { 
    background-color: deepskyblue; 
} 

.selector__block { 
    color: lightblue; 

    .another-selector & { 
    color: lightcoral; 
    } 
}

來源

2017-07-18 09:22:02

@ Dejan.S我不是BEM的大風扇（但這是另一個咆哮;-)。然而，如果你正在使用BEM我覺得嵌套將有助於說明層次和期待什麼

SCSS：

.selector { 
    // selector styles 
    color: red; 

    // default selector block style 
    &__block { color: green; } 

    // selector variant selector block styles 
    &.foo &__block { color: blue; } 
    &.bar &__block { color: yellow; } 
}

CSS輸出：

.selector { color: red; } 
.selector__block { color: green; } 
.selector.foo .selector__block { color: blue; } 
.selector.bar .selector__block { color: yellow; }

HTML：

<div class="selector"> 
    Selector <!-- red --> 
</div> 
<div class="selector"> 
    Selector <!-- red --> 
    <div class="selector__block"> 
     Selector Block <!-- green --> 
    </div> 
</div> 
<div class="selector foo"> 
    Selector <!-- red --> 
    <div class="selector__block"> 
     Selector Foo Block <!-- blue --> 
    </div> 
</div> 
<div class="selector bar"> 
    Selector <!-- red --> 
    <div class="selector__block"> 
     Selector Bar Block <!-- yellow --> 
    </div> 
</div>

來源

2017-07-18 10:12:00

SCSS嵌套語法：巢父母毗

回答

相關問題