扩展

2018-02-24 15:11 更新

@extend 指令是几年前使 Sass 风靡一时的重要特性之一。该指令作为一个警示,告知 Sass 对元素 A 的样式化正好存在与选择器B共通的地方。不用多说,这是书写模块化 CSS 的好助手。

然而我感觉必须提醒你谨慎使用这个特性。正因灵活多变,所以 @extend 还是一个棘手的概念,某些时候可能弊大于利,特别是被滥用时。当扩展一个选择器时,除非你对整个代码库有深入的了解,不然肯定没法回答诸如下面的问题:

  • 当前选择器要追加到哪里?
  • 我是否会碰上意料之外的副作用?
  • 这条简单的扩展将会产生多大的CSS?

如你所知,结果的可能即包括没有任何影响,也包括灾难性副作用。因此,我的第一建议是完全避免使用 @extend 指令。这听起来有些残酷,但最终会拯救你于水火之中。

俗话说的好:

永远不要说不可能。
— Apparently, not Beyonce.

扩展选择器在有些情境下是有用和值得的。始终牢记这些规则,那样就不会是自己陷入困境:

  • 从单一模块扩展,而不是多个不同的模块;
  • 只使用占位符扩展,而不使用实际的选择器;
  • 确保用来扩展的占位符是样式表中尽可能小的。

如果你要使用扩展,我想提醒你它也不能与 @media 块元素融洽相处。如你所知,Sass 不能在一个媒体查询中扩展外部的选择器。当你这么做的时候,编译器轻易就会崩溃,并提醒你不能这么干。这不是好消息,特别是几乎所有人都知道媒体查询功能。

.foo {
  content: 'foo';
}

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

无法在 @media 内部 @extend 一个外部选择器。 只可以使用相同指令 @extend 选择器。

这就是常说的 @extend 可以通过合并选择器而不是复制属性帮助减小文件大小。这种说法是对的,不过一旦经 Gzip 处理后这点差异完全可以忽略不计。

也就是说,如果你无法使用 Gzip(或相同工具),在你足够精通的前提下使用@extend 方式也是不错的。

总而言之,除非在某些特殊情况下,否则我建议不要使用 @extend 指令,但我不会禁用它。

扩展阅读

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号