Question

在Sass中，我无法辨别使用@include和mixin以及将@extend与占位符类一起使用之间的区别。他们不是一样的吗？

Answer 1

扩展不允许自定义，但它们可以生成非常高效的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;
}

请按照以下连续的代码示例进行操作，了解如何通过有效地使用extends和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 ：扩展生成比 mixins 更紧凑的CSS，但是当gzip压缩时，这种好处会减少。如果您的服务器提供gzip压缩的CSS（它真的应该！），那么 extends 几乎没有任何好处。所以你总是可以使用 mixins ！更多相关信息：http://www.sitepoint.com/sass-extend-nobody-told-you/

Answer 2

一个好的方法是使用两者 - 创建一个mixin，允许你进行大量的自定义，然后对该mixin的常见配置进行扩展。例如（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);
}

这样可以避免一遍又一遍地调用my-button mixin。这也意味着您不必记住常用按钮的设置，但如果您选择，您仍然可以制作超级独特的一次性按钮。

我不久前从a blog post I wrote拿这个例子。希望这会有所帮助。

Answer 3

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

给出了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;
}

当浏览器不理解选择器时，它会使整个选择器行无效。这意味着您珍贵的mystyle-class不再是蓝色的（对于许多浏览器而言）。这究竟意味着什么？如果您在任何时候使用扩展程序，浏览器可能无法理解选择程序，则扩展程序的每次其他使用都将失效。此行为还允许邪恶嵌套：

%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;博士：@extend完全没问题，只要你从不在任何浏览器特定选择器上使用它。如果你这样做，它会突然拆掉你使用它的样式。试着依靠mixin来代替！

Answer 4

如果它接受参数，则使用mixins，其中编译的输出将根据您传入的参数而改变。

@include opacity(0.1);

对任何静态可重复的样式块使用extend（带占位符）。

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

Answer 5

我完全赞同d4nyll之前的回答。关于扩展选项有a text，当我研究这个主题时，我发现了很多关于扩展的抱怨，所以请记住，如果有可能使用mixin而不是extend，只需跳过extend。 / p>

在Sass中使用@include vs @extend？

5 个答案: