減CSS：延長（）時，一個額外的選擇連接到父選擇

Question

不工作，我不知道爲什麼會發生這種工作

&:extend(.test all); 

但

&.a_class:extend(.test all); 

不起作用？

Answer 1

還有就是兩者之間的主要區別在於擴大在該題所給的模式，這就是爲什麼一個作品，而其他沒有。

的第一方法（使用親本選擇器（&）延伸），通常使用通過將其放置另一個選擇器塊內的類似：

.test{ 
    a:a 
} 
#dummy{ 
    &:extend(.test all); 
} 

這被稱作Extend inside Ruleset這通常不需要捲曲行尾有大括號{}。事實上，對於這個問題，只有提供大括號時纔會出現錯誤。

---

的第二方法因爲這裏是由安裝一個額外的類到母體選擇器和用於這種方法中的大括號在端強制要求創建一個新的選擇被稱爲Extend attached to a selector。否則會引發編譯錯誤。

包括大括號像下面片段會導致代碼正確編譯：

.test{ 
    a:a 
} 

#dummy{ 
    &.a_class:extend(.test all){}; 
} 

在我看來，都需要第二個方法大括號，而不是第一個，因爲如果沒有括號，第二通常不是我們如何在CSS中編寫規則 - 每個選擇器都必須有一個主體（{}）來包含其規則。第一個選擇器已經有了它的主體，因爲擴展本身被放置在其中。

Answer 2

您不能使用&後跟一個類，因爲&代表當前選擇器父項。
你需要嘗試

.a_class { 
    &:extend(.test all); 
}