SASS：擴展Classess與變量

Question

最近使用Sass時，我一直在擴展類作爲變量的替代品。

例如：

- 使用一個可變

$small-font: 12px 

p { 
font-size: $small-font 
} 

-Extending類

.small-font { 
font-size:12px; 
} 

p { 
@extend .small-font; 
} 

延伸類的優點是，它可以更容易地使你的代碼響應。例如，我可以將.small-font包裝在媒體查詢中，這對變量來說是不可能的。

我的問題是：以這種方式使用擴展類有什麼缺點嗎？ 我知道輸出會傾向於將所有類組合在一起（這可能會使調試更加繁瑣），但是還有其他潛在的問題嗎？

Answer 1

有幾個問題。其中之一就是它的瘋狂滑溜性質。這將回來咬你作爲維修問題。作爲代碼組織方案，每個屬性類沒有意義。這並不意味着你離得很遠 - 在理性的情況下，@extend非常適合這樣的事情。

原因是關鍵：你的分組應該是合理的分組。儘管html風格的內容語義對於@extends並不重要，但仍然應該有一種語義組織的感覺。我已經看到了「視覺語義學」這個術語。你的命名應該超越描述效果，並描述它的視覺原因。不是％黃色，而是％高亮文本。不是％紅色，而是％警告。不是什麼，但爲什麼。

另一個問題是級聯。輸出代碼的順序非常重要，因爲它會影響級聯（這是CSS的重要組成部分）。採用這種方法，您會發現自己會定期與級聯對抗 - 因爲您放棄了對代碼順序的控制。 @extend對於廣泛和簡單的默認分組非常有用，但對級聯覆蓋沒有任何好處。