在 Sass 中，@mixin 和 @extend 指令有什么区别？

Question

我刚刚完成了 Sass guide。 该指南解释了 mixins：

..mixin 可以让你创建一组你想要的 CSS 声明 在您的网站中重复使用。你甚至可以传入值来使你的 mixin 更灵活。

和扩展：

.. 这是 Sass 最有用的特性之一。使用@extend 让 您将一组 CSS 属性从一个选择器共享到另一个选择器..

看起来'extend'可能在'mixin'中实现（似乎'mixin'是'extend'的扩展:-)）。

// @extend
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

// @mixin
@mixin message($color) {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: $color;
}

.success { @include message(green); }

.error { @include message(red); }

.warning { @include message(yellow); }

甚至更多，因为 mixin 有参数。 但另一方面，处理后的 CSS 并不完全相同。但它会在 DOM 上产生相同的样式效果。

/* extend processed */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
  border-color: green; }

.error {
  border-color: red; }

.warning {
  border-color: yellow; }

/* mixin processed */

.success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: green; }

.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: red; }

.warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: yellow; }

我的问题是这些功能有何不同？ 我应该什么时候使用一个而不是另一个？

Answer 1

嗯，Mixin 就像函数可以做一些工作并输出处理结果，而extend 就像预定义的cop-paste 代码

Answer 2

来自http://blog.nakulrajput.com/mixins-extends-and-placeholders/：

@mixin

下面是mixin 的工作原理。定义和用法：

@mixin awesome {
    width: 100%;
    height: 100%;
}

body {
    @include awesome;
}

p {
    @include awesome;
}

上面的 sn-ps 生成以下 CSS：

body {
    width: 100%;
    height: 100%;
}

p {
    width: 100%;
    height: 100%;
}

为了让事情变得更有趣，我们可以让我们的 mixin 接受参数。更好的是，如果 mixin 不带参数调用，我们可以定义默认值。

@mixin awesome($w: 100%, $h: 100%) {
    width: $w;
    height: $h;
}

body {
    @include awesome(960px);
}

p {
    @include awesome;
}

结果会相似，但是body的宽度不同。

body {
    width: 960px;
    height: 100%;
}

p {
    width: 100%;
    height: 100%;
}

如果你使用 mixins，其中的样式会为每个选择器复制。

如果您需要更改或计算最终输出中的某些内容，混合非常有用，例如如果您需要将border-radius 应用于多个元素。

但是，在某些其他情况下，存在大量重复代码，如果您使用 @extend，则可以避免这种情况。

**@extend**

.awesome {
    width: 100%;
    height: 100%;
}

body {
    @extend .awesome;
}

p {
    @extend .awesome;
}

很相似，不是吗。在 Sass 中它看起来几乎相同，但 CSS 的结果是：

.awesome, body, p {
    width: 100%;
    height: 100%;
}

比使用 mixin 的版本短。在扩展过程中不能传递参数，但实际上不是这样。

@extend 应该用在你想在元素之间共享属性的地方。

Answer 3

在编程方面：
@include 就像调用带或不带参数的函数
@extend 就像继承

函数意味着，每次我们调用函数时，函数的主体都会被复制，因为我们可能会以参数的形式传递动态信息。所以你会得到身体的副本。

继承意味着，没有重复，我们得到一个 Reference 而不是副本。所以谁曾扩展该引用将得到相同的身体。