在Sass中使用@include vs @extend？

sass

Using @include vs @extend in Sass?

在Sass中，我无法完全分辨使用@include与mixin和使用@extend与占位符类之间的区别。它们不是同一件事吗？

相关讨论

扩展不允许自定义，但它们会生成非常有效的CSS。

1
2
3
4
5
6
7
8
9
10

%button
background-color: lightgrey
&:hover, &:active
background-color: white

a
@extend %button

button
@extend %button

结果：

1
2
3
4
5
6

a, button {
background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
background-color: white;
}

使用mixins，您将获得重复的CSS，但是您可以使用参数来修改每种用法的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13

=button($main-color: lightgrey, $active-color: white)
background-color: $main-color
border: 1px solid black
border-radius: 0.2em

&:hover, &:active
background-color: $active-color

a
+button

button
+button(pink, red)

结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

a {
background-color: lightgrey;
border: 1px solid black;
border-radius: 0.2em;
}
a:hover, a:active {
background-color: white;
}

button {
background-color: pink;
border: 1px solid black;
border-radius: 0.2em;
}
button:hover, button:active {
background-color: red;
}

请遵循以下连续的代码示例集，以了解如何通过有效地使用扩展和混合来使代码更清洁，更可维护：http://thecodingdesigner.com/posts/balancing

请注意，不幸的是，SASS不允许在媒体查询内部使用扩展(并且上述链接中的相应示例是错误的)。在需要基于媒体查询进行扩展的情况下，请使用mixin：

1
2
3
4
5
6
7
8
9
10
11
12
13

=active
display: block
background-color: pink

%active
+active

#main-menu
@extend %active // Active by default

#secondary-menu
@media (min-width: 20em)
+active // Active only on wide screens

结果：

1
2
3
4
5
6
7
8
9
10
11

#main-menu {
display: block;
background-color: pink;
}

@media (min-width: 20em) {
#secondary-menu {
display: block;
background-color: pink;
}
}

在这种情况下，复制是不可避免的，但是您不必太在意它，因为Web服务器的gzip压缩将解决它。

PS请注意，您可以在媒体查询中声明占位符类。

2014-12-28更新：扩展生成的CSS比mixins更紧凑，但是压缩CSS时，这种好处会减弱。如果您的服务器提供压缩的CSS(确实如此！)，那么扩展几乎不会给您带来任何好处。因此，您始终可以使用mixins！此处的更多信息：http://www.sitepoint.com/sass-extend-nobody-told-you/

相关讨论

我认为这并不完全准确...您可以通过覆盖扩展父项来自定义@extends。当然您不能传递参数，但是那是唯一的区别吗？在那种情况下，@extend只是@mixin而没有参数吗？我仍然看不到优势或差异。
这是其他一些怪癖... stackoverflow.com/questions/30744625 / ...
我会仔细解释最后一段的"给您几乎没有好处"方面。 Gzip压缩是基于字典的霍夫曼编码器，因此，如果重复发生得足够远，则字典中将不会出现文本，并且压缩率会受到影响。我仍然总是尽可能地选择@extend，因为这将产生更紧凑的CSS，仍然可以很好地压缩(毕竟是ASCII文本)。
@amcgregor，差异可以忽略不计。
@ AndreyMikhaylov-lolmaus我同意！我希望这种差异在本质上是无法测量的，而不管选择使用兆字节左右的生成CSS大小，还是使用@extend压缩后的最终结果会更紧凑的事实。这似乎是基于直觉和直觉的微观优化，而不是基于对压缩方案实际工作方式的理解。 (此外：它忽略了按需gzip传输编码的大量开销；压缩不是免费的！；)
@amcgregor压缩成本取决于服务器配置。好的服务器可以缓存结果并提供预压缩的Brotli，这是非常有效的。无论使用扩展还是混入，都应该这样做。
@amcgregor，也就是说，extends的使用可能会给您带来很多麻烦：1.无法在媒体查询中使用； 2.无法根据使用情况进行自定义(无参数)； 3.如果您只能从%placeholder类进行扩展而从.normal类进行扩展，则将获得getting肿的选择器。因此，在mixin上使用extends具有非常可观的开发/维护成本。
@amcgregor，而有效负载大小中几个额外字节的开销却可以忽略不计，以至于开发人员花在考虑优化上的时间甚至都不值得。除非您是Amazon.com，否则每增加一毫秒的加载时间都会损失统计上显着的利润损失。
HTML人员写的所有这些……完全不需要吗？ HTML5Boilerplate(1611字节index.html，70.2KB传输，总共152KB)与我自己的变体(包括相同的元数据)：622字节。减少到原始大小的38.6％(压缩之前仅计算index.html本身)，我认为比" Amazon毫秒"还大。总是会有组合的情况，但是……这不是不可避免的。只是懒惰。 (可悲的是，真实的…)
@amcgregor我不会在优化上浪费很多时间，因为这些优化只能获得固定的1 KB胜利。那是不值得的。如果可以快速完成，请执行。如果需要花费大量时间和精力，请把它花在更有用的事情上，例如业务逻辑。
@amcgregor至于"组合地狱案"，如果您广泛使用@extend，则总是会这样。选择器将在您的开发工具中占据大部分屏幕区域，这使其难以工作。您必须付出浪费的开发人员时间付出的代价远远超过一毫秒的加载时间所带来的利润损失(除非您是Amazon)。
@amcgregor嘿，我已经创建了"组合地狱" @extend示例的混合版本。我用这个网站来比较压缩率。 @extend版本在gzip模式下赢得了4个字节，在Brotli模式下赢得了1个字节。一。字节。
@amcgregor如果您的CSS开发人员每周工作40个小时，每小时赚$ 35，并且由于@extend的缺点而每天浪费20分钟，这意味着在mixins上扩展，每个开发人员每年大约要花费$ 3000。而且，如果您告诉他们花费时间以其他方式优化CSS / HTML中的更多字节，这也将花费您真实的钱(因为开发人员的薪水不会花在有用的功能上)。没有客户会感谢您省略</html>结束标记。他们将永远不会注意到。
@ AndreyMikhaylov-lolmaus特别关注该标记，就像用户阅读它一样是红色鲱鱼。用户可能会在释放鼠标按钮时注意到该页面已加载。生成不需要的HTML(请在其中注意cinje_flush_first，TTFB)会影响用户体验。还增加了碳足迹，类似于选项卡式与空基压痕。
@ AndreyMikhaylov-lolmaus我最新的应用程序部署具有0.5毫秒(±0.3毫秒)的页面生成时间。在用户完成点击之前，我真的不是在开玩笑说正在加载页面。你们都提到薪水，我会指出销售额。
@amcgregor这里有两点。一：您是否测量了从扩展到混合的切换对加载时间的实际影响？第二：您是否衡量过您的企业将因这种差异而损失多少钱？还有一个额外的问题：您的公司必须赚多少收入才能值得讨论？亚马逊是独一无二的：它们依靠数十亿的小额销售，而其他大多数企业所依赖的销售数量则少得多。寻找独特产品的客户也有非常不同的习惯：如果我真的需要东西，无论等待时间长短，我都会购买。
2012年初的那篇文章声称，亚马逊将在加载时间增加一秒钟时失去16亿美元的销售额。亚马逊2011年的总销售额为480.8亿美元。这意味着一秒钟的销售额占其销售额的3％以上。这是很多。如果这是真的，则意味着很大一部分销售额是对不重要商品的冲动性购买。否则，客户将不会忘记一秒钟后的购买。你的生意是这样吗？如果您要向数十亿客户出售随机垃圾，那么也许您应该使用Sass扩展程序(即使我没有看到实际的度量证明它们更快)。
哦，别忘了将额外几毫秒的加载时间与几天后推出每个新功能的成本进行比较(这些延迟会累积数年)。当开发工具中的选择器看起来像这样时，开发人员的工作效率将受到很大影响。

一个好的方法是同时使用两者-创建一个mixin，它将允许您进行大量自定义，然后扩展该mixin的常规配置。例如(SCSS语法)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@mixin my-button($size: 15, $color: red) {
@include inline-block;
@include border-radius(5px);
font-size: $size + px;
background-color: $color;
}
%button {
@include my-button;
}
%alt-button {
@include my-button(15, green);
}
%big-button {
@include my-button(25);
}

这使您不必一遍又一遍地调用"我的按钮" mixin。这也意味着您不必记住常用按钮的设置，但仍可以选择一个超级独特的一次性按钮。

我以不久前写的博客文章为例。希望这会有所帮助。

在我看来，扩展是纯粹的邪恶，应避免。原因如下：

给出了scss：

1
2
3
4

%mystyle {color: blue;}
.mystyle-class {@extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {@extend %mystyle}

将生成以下CSS：

1
2
3

.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
color: blue;
}

当浏览器不了解选择器时，它将使选择器的整行无效。这意味着您宝贵的mystyle-class不再是蓝色的(对于许多浏览器而言)。
这到底是什么意思？如果您在任何时候使用扩展程序而浏览器可能无法理解选择器，则该扩展程序的其他所有使用都会失效。
此行为还允许进行邪恶嵌套：

1
2
3
4
5

%mystyle {color: blue;}
@mixin mystyle-mixin {@extend %mystyle; height: 0;}
::-webkit-input-placeholder {@include mystyle-mixin}
//you thought nesting in a mixin would make it safe?
.mystyle-class {@extend %mystyle;}

结果：

1
2
3
4
5
6
7

::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
color: blue;
}

::-webkit-input-placeholder {
height: 0;
}

Tl; dr：只要您从未将其与任何浏览器特殊选择器一起使用，@ extend就是可以的。如果这样做，无论您在哪里使用它，它都会突然拆下样式。尝试改用mixins！

相关讨论

如果mixins接受参数，请使用mixins，编译后的输出将根据传递给它的内容而改变。

1	@include opacity(0.1);

对所有静态的可重复样式块使用扩展(带有占位符)。

1
2
3

color: blue;
font-weight: bold;
font-size: 2em;

我完全同意d4nyll的先前回答。有一篇关于扩展选项的文章，当我研究这个主题时，我发现了很多关于扩展的抱怨，因此请记住，如果有可能使用mixin而不是扩展，只需跳过扩展即可。