薩斯@extend排序 - 需要的解決方法

@extend作品中出現的擴展選擇樣式表的任何位置插入擴展選擇。

這引起了我很大的爭執。具體來說，我有我必須擴展的Sass代碼，並且我沒有修改（它是自動生成的）的自由，就像這樣（代碼僅用於代表性示例;我明白它不實用）：

/* These styles cannot be updated (in a library, autogen'd, whatever) */ 
%base-link { color: blue } 
%disabled-link { color: grey } 
%hover-link { color: black } 
/* End styles that cannot be updated */

然後我有我的地方SCSS代碼：

/* These styles are available for modification */ 
a:link { @extend %base-link } 
a:hover { @extend %hover-link } 
a.disabled 
{ 
    @extend %disabled-link; 
    cursor: default; 
}

注意，我最後把a.disabled選擇，b/C，所有在特異性方面其他條件不變，我想a.disabled規則勝過所有其他人（即我不希望當一個disabled鏈接懸停時鏈接變黑）。

爲了完整，HTML標記：

<a href="http://www.pittsburghpenguins.com">Pittsburgh Penguins</a><br> 
<a href="http://www.philadelphiaflyers.com" class=disabled>Philadelphia Flyers</a><br>

（JSFiddle）

正確的級聯就決定了與disabled類的超鏈接應該懸停保持灰色（這就是爲什麼我把該規則的hover後規則）。但是，b/c Sass正在將extending類移動到樣式表中extended類的位置，因此排序被取消並且級聯被違反。他們正在有效地改變我的CSS的意圖。

有什麼辦法可以解決這個問題嗎？

來源

2016-12-15 CranMalReign

a.disabled, a.disabled:hover 
{ 
    @extend %disabled-link; 
    cursor: default; 
}

我認爲它發生a.disabled和a:hover是選擇具有相同優先級的原因。因此，如果a.disabled:hover未定義，則將應用a:hover的規則。

來源

2016-12-15 20:09:17 Banzay

感謝您的解決方法。應該是顯而易見的。如有疑問，請增加特異性！對於我的真實情況，實際上，在：hover規則中添加：not（.disabled）會更好，但同樣的想法。仍然覺得這是不必要的工作，以避免Sass從根本上改變我的造型代碼的意義，這個「功能」。 – CranMalReign

薩斯@extend排序 - 需要的解決方法

回答

相關問題