sass - 在 Sass 中使用 @include 与 @extend？

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;
}

请按照这组连续的代码示例来了解如何通过有效地使用扩展和混合来使代码更干净且更易于维护:http://thecodingdesigner.com/posts/balancing

请注意，不幸的是，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 日:Extends 生成的 CSS 比 mixins 更紧凑，但当 CSS 被压缩时，这种好处就会减弱。如果您的服务器提供 gzipped CSS(它确实应该!)，那么扩展几乎不会给您带来任何好处。所以你总是可以使用mixins!更多信息请参见:http://www.sitepoint.com/sass-extend-nobody-told-you/