如何在SCSS中否決@extend指令？

我有按鈕組內的按鈕。按鈕組具有不同的尺寸，例如button-group-large。我的目標是避免必須通過讓它從按鈕組中推斷出大小來明確設置按鈕組中每個按鈕的大小。也就是說，不是如何在SCSS中否決@extend指令？

<div class="button-group-large"> 
    <button class="button-large">Foo</button> 
    <button class="button-large">Bar</button> 
</div>

我寧願寫：

<div class="button-group-large"> 
    <button>Foo</button> 
    <button>Bar</button> 
</div>

我可以做這樣的（在SASS）：

.button-group-large { 
    button { @extend .button-large; } 
}

這工作，但產生以下問題。如果我的其中一個按鈕有特殊類別，則.button-large類將優先。也就是說，如果我做

<div class="button-group-large"> 
    <button class="special">Foo</button> 
    <button>Bar</button> 
</div>

然後就是.special和.button-large之間的不同將得到.button-large值而不是.special值的任何屬性。我希望這是相反的; .special應該贏在這裏。（作爲一個真實世界的例子，.special可能會設置一個「主」按鈕顏色）。

下面是示出該問題的的jsfiddle：https://jsfiddle.net/wwr63qmv/3/

作爲參考點，Bootstrap button groups避免這個問題通過要求類單獨上的每個按鈕來設定，而不是在按鈕組。這可能是唯一的答案。有沒有其他方法可以讓.special班贏得這裏？

來源

2016-06-17 Sasgorilla

你可以用'重要rule'或使'.special'具體爲你的' @ extend'。 – makshh

您面臨的問題不是由於Sass或@extend指令。這是CSS的工作原理。如果多個選擇器指向相同的元素，那麼最具體的選擇器獲勝（或），如果特異性相同，則文件中定義的最新選擇器獲勝。

在你的提琴會產生以下輸出的SCSS代碼進行編譯時：

.button, ul.button-group li button { /* check this selector */ 
    border: 1px solid black; 
    color: black; 
    border-radius: 2px; 
} 
.special-button { /* and this */ 
    border: 1px solid green; 
    color: green; 
} 
ul.button-group { 
    margin: 10px; 
} 
ul.button-group li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 5px; 
} 
p { 
    font-family: monospace; 
}

這兩種選擇 - ul.button-group li button和.special-button將針對其具有類作爲.special-button按鈕。第一個選擇器的特殊性是013（因爲它有1個類和3個類型選擇器作爲完整複雜選擇器的一部分），而第二個選擇器的特性是010（因爲它只有一個類選擇器）。所以，本質上，第一個選擇器獲勝，只有它所指定的屬性適用於該元素。

爲了適用.special-button樣式，應該增加該選擇器的特異性。這可以簡單地通過將選擇器改變爲ul.button-group li button.special-button來完成，但是這意味着選擇器現在將僅具有button和class='special-button'，其在li之內，其父母具有class='button-group'。這使得它非常具體，並且意味着如果button.special-button在ul.button-group li之外，則屬性將不適用。

另一個選擇是也延長了.special-button的li內象下面這樣：！

ul.button-group { 
    margin: 10px; 
    li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 5px; 
    button { 
     @extend .button; 
     &.special-button { /* note this */ 
     @extend .special-button; 
     } 
    } 
    } 
}

Fiddle Demo

來源

2016-06-18 05:23:03 Harry

謝謝@哈利！這很清楚。其中一條或兩條建議都適用於我。 – Sasgorilla

如何在SCSS中否決@extend指令？

回答

相關問題