`@extend`?指令是幾年前使 Sass 風靡一時的重要特性之一。該指令作為一個警示，告知 Sass 對元素 A 的樣式化正好存在與選擇器B共通的地方。不用多說，這是書寫模塊化 CSS 的好助手。 然而我感覺必須提醒你謹慎使用這個特性。正因靈活多變，所以?`@extend`?還是一個棘手的概念，某些時候可能弊大于利，特別是被濫用時。當擴展一個選擇器時，除非你對整個代碼庫有深入的了解，不然肯定沒法回答諸如下面的問題： * 當前選擇器要追加到哪里？ * 我是否會碰上意料之外的副作用？ * 這條簡單的擴展將會產生多大的CSS？ 如你所知，結果的可能即包括沒有任何影響，也包括災難性副作用。因此，我的第一建議是完全避免使用?`@extend`?指令。這聽起來有些殘酷，但最終會拯救你于水火之中。 俗話說的好： > 永遠不要說不可能。 > — Apparently,?[not Beyonce](https://github.com/HugoGiraudel/sass-guidelines/issues/31#issuecomment-69112419). 擴展選擇器在有些情境下是有用和值得的。始終牢記這些規則，那樣就不會是自己陷入困境： * 從單一模塊擴展，而不是多個不同的模塊； * 只使用占位符擴展，而不使用實際的選擇器； * 確保用來擴展的占位符是樣式表中盡可能小的。 如果你要使用擴展，我想提醒你它也不能與?`@media`?塊元素融洽相處。如你所知，Sass 不能在一個媒體查詢中擴展外部的選擇器。當你這么做的時候，編譯器輕易就會崩潰，并提醒你不能這么干。這不是好消息，特別是幾乎所有人都知道媒體查詢功能。 ~~~ .foo { content: 'foo'; } @media print { .bar { // This doesn't work. Worse: it crashes. @extend .foo; } } ~~~ > 無法在?`@media`?內部?`@extend`?一個外部選擇器。 只可以使用相同指令?`@extend`?選擇器。 這就是常說的?`@extend`?可以通過合并選擇器而不是復制屬性幫助減小文件大小。這種說法是對的，不過一旦經?[Gzip](http://en.wikipedia.org/wiki/Gzip)?處理后這點差異完全可以忽略不計。 也就是說，如果你無法使用 Gzip（或相同工具），在你足夠精通的前提下使用`@extend`?方式也是不錯的。 總而言之，除非在某些特殊情況下，否則我**建議不要使用?`@extend`?指令**，但我不會禁用它。 ## 擴展閱讀 * [What Nobody Told you About Sass Extend](http://www.sitepoint.com/sass-extend-nobody-told-you/) * [Why You Should Avoid Extend](http://www.sitepoint.com/avoid-sass-extend/) * [Don’t Over Extend Yourself](http://pressupinc.com/blog/2014/11/dont-overextend-yourself-in-sass/) * [When to Use Extend; When to Use a Mixin](http://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/)