在Sass中使用@include和@extend？
在Sass中，我无法区分使用@include和mixin并使用@extend和占位符类的@extend 。 难道它们不是相同的东西？
扩展不允许定制，但是它们生成非常高效的CSS。
%button background-color: lightgrey &:hover, &:active background-color: white a @extend %button button @extend %button
结果：
a, button { background-color: lightgrey; } a:hover, button:hover, a:active, button:active { background-color: white; }
使用mixins，您会得到重复的CSS，但是您可以使用参数来修改每个用法的结果。
=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)
结果是：
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; }
请遵循下面这组连续的代码示例，了解如何通过有效地使用扩展和mixin来使代码更清洁，更易于维护： http : //thecodingdesigner.com/journal/balancing-ideal-sass-and-ideal-css
请注意，SASS不幸的是不允许在媒体查询中使用扩展（以上链接的相应示例是错误的）。 在需要基于媒体查询进行扩展的情况下，使用mixin：
=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
结果：
#main-menu { display: block; background-color: pink; } @media (min-width: 20em) { #secondary-menu { display: block; background-color: pink; } }
在这种情况下，复制是不可避免的，但是你不应该太在意，因为web服务器的gzip压缩会处理它。
PS请注意，您可以在媒体查询中声明占位符类。
更新2014-12-28 ： 扩展生产比mixin更紧凑的CSS，但是当CSS被压缩时，这个好处是减less的。 如果你的服务器提供了gzip的CSS（它确实应该！），那么扩展给你几乎没有任何好处。 所以你可以随时使用mixins ！ 更多关于这里： http : //www.sitepoint.com/sass-extend-nobody-told-you/
一个好的方法是同时使用 – 创build一个mixin，这将允许您进行大量的定制，然后扩展该mixin的通用configuration。 例如（SCSS语法）：
@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); }
这节省了你一遍又一遍地调用我的button混合。 这也意味着你不必记住常用button的设置，但你仍然有能力做出超级独特的，一次性的button，你应该select。
我从不久前写的博客文章中看到这个例子。 希望这可以帮助。
在我看来，延伸是纯粹的邪恶，应该避免。 这是为什么：
鉴于scss：
%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将被生成：
.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers color: blue; }
当浏览器不理解select器时，会使整行select器无效。 这意味着您宝贵的mystyle级不再是蓝色的（对于许多浏览器）。 这是什么意思？ 如果您在任何时候使用了一个浏览器可能不理解select器的扩展，则每隔一次使用这个扩展将被视为无效。 这种行为也允许邪恶的嵌套：
%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;}
结果：
::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers color: blue; } ::-webkit-input-placeholder { height: 0; }
Tl; dr：@extend只要你从不用任何浏览器特定的select器，就完全可以。 如果你这样做，它会突然拆除你使用它的样式。 尝试依靠mixin代替！
使用mixins，如果它接受一个参数，其中编译的输出将根据你传入的参数而改变。
@include opacity(0.1);
使用扩展（使用占位符）任何静态可重复的样式块。
color: blue; font-weight: bold; font-size: 2em;
