擴(kuò)展

@extend?指令是幾年前使 Sass 風(fēng)靡一時的重要特性之一。該指令作為一個警示，告知 Sass 對元素 A 的樣式化正好存在與選擇器B共通的地方。不用多說，這是書寫模塊化 CSS 的好助手。

然而我感覺必須提醒你謹(jǐn)慎使用這個特性。正因靈活多變，所以?@extend?還是一個棘手的概念，某些時候可能弊大于利，特別是被濫用時。當(dāng)擴(kuò)展一個選擇器時，除非你對整個代碼庫有深入的了解，不然肯定沒法回答諸如下面的問題：

• 當(dāng)前選擇器要追加到哪里？
• 我是否會碰上意料之外的副作用？
• 這條簡單的擴(kuò)展將會產(chǎn)生多大的CSS？

如你所知，結(jié)果的可能即包括沒有任何影響，也包括災(zāi)難性副作用。因此，我的第一建議是完全避免使用?@extend?指令。這聽起來有些殘酷，但最終會拯救你于水火之中。

俗話說的好：

永遠(yuǎn)不要說不可能。
— Apparently,?not Beyonce.

擴(kuò)展選擇器在有些情境下是有用和值得的。始終牢記這些規(guī)則，那樣就不會是自己陷入困境：

• 從單一模塊擴(kuò)展，而不是多個不同的模塊；
• 只使用占位符擴(kuò)展，而不使用實際的選擇器；
• 確保用來擴(kuò)展的占位符是樣式表中盡可能小的。

如果你要使用擴(kuò)展，我想提醒你它也不能與?@media?塊元素融洽相處。如你所知，Sass 不能在一個媒體查詢中擴(kuò)展外部的選擇器。當(dāng)你這么做的時候，編譯器輕易就會崩潰，并提醒你不能這么干。這不是好消息，特別是幾乎所有人都知道媒體查詢功能。

.foo {
  content: 'foo';
}

@media print {
  .bar {
    // This doesn't work. Worse: it crashes.
    @extend .foo;
  }
}

無法在?@media?內(nèi)部?@extend?一個外部選擇器。 只可以使用相同指令?@extend?選擇器。

這就是常說的?@extend?可以通過合并選擇器而不是復(fù)制屬性幫助減小文件大小。這種說法是對的，不過一旦經(jīng)?Gzip?處理后這點(diǎn)差異完全可以忽略不計。

也就是說，如果你無法使用 Gzip（或相同工具），在你足夠精通的前提下使用@extend?方式也是不錯的。

總而言之，除非在某些特殊情況下，否則我建議不要使用?@extend?指令，但我不會禁用它。

擴(kuò)展閱讀

• What Nobody Told you About Sass Extend
• Why You Should Avoid Extend
• Don’t Over Extend Yourself
• When to Use Extend; When to Use a Mixin