96

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

4

5 回答 5

89

扩展不允许定制，但它们产生非常高效的 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 更新：扩展生成的 CSS 比mixins更紧凑，但是当 CSS 被 gzip 压缩时，这种优势会减弱。如果您的服务器提供 gzip 压缩的 CSS（它真的应该！），那么扩展几乎不会给您带来任何好处。所以你总是可以使用mixins！更多信息在这里：http ://www.sitepoint.com/sass-extend-nobody-told-you/

于 2013-08-02T09:17:32.057 回答
18

一个好的方法是同时使用这两种方法——创建一个允许您进行大量自定义的 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。这也意味着您不必记住常用按钮的设置，但如果您选择，您仍然可以制作一个超级独特的一次性按钮。

我从不久前写的一篇博文中举了这个例子。希望这可以帮助。

于 2014-02-23T12:39:08.457 回答
14

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

给定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;dr：只要您从不将它与任何浏览器特定的选择器一起使用，@extend 就完全可以。如果你这样做了，它会突然破坏你使用过的样式。尝试使用 mixins 代替！

于 2015-12-22T11:09:37.937 回答
4

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

@include opacity(0.1);

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

color: blue;
font-weight: bold;
font-size: 2em;
于 2015-02-16T08:30:32.423 回答
0

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

于 2018-03-13T10:52:11.340 回答