Question

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

.. mixin允许您创建所需的CSS声明组在整个网站中重复使用你甚至可以传递价值来制作你的 mixin更灵活。

和延伸：

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

看起来'Extend'可以在'mixin'中实现（似乎'mixin'是'extend'的延伸:-)）。

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

甚至更多，因为混合有params。但另一方面，处理过的css并不完全相同。但它对DOM的风格效果会相同。

Error: A dynamic link library (DLL) initialization routine failed.
\\?\(Project Folder)\node_modules\leveldown\build\Release\leveldown.node: unable to import leveldown
at requireLeveldown ((Project Folder)\node_modules\pouchdb\lib\index.js:6206:12)
at PouchDB$5.LevelDownPouch ((Project Folder)\node_modules\pouchdb\lib\index.js:6406:17)
at new PouchDB$5 ((Project Folder)\node_modules\pouchdb\lib\index.js:2732:36)
at database_init ((Project Folder)\index.js:102:12)
at App.app.on ((Project Folder)\index.js:58:2)
at emitTwo (events.js:111:20)
at App.emit (events.js:191:7)

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

Answer 1

这是从http://blog.nakulrajput.com/mixins-extends-and-placeholders/复制的：

<强> @mixin

以下是 mixin如何运作。定义和用法：

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

body {
    @include awesome;
}
p {
    @include awesome;
}

上面的代码段产生以下代码。

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 {
    width: 960px;
    height: 100%;
}
p {
    width: 100%;
    height: 100%;
}

如果你使用mixins，那么它们中的样式就会重复类

如果您需要更改或计算最终输出中的内容，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 2

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

Answer 3

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

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

继承意味着，没有重复，我们得到一个引用而不是复制。因此，任何扩展该引用的人都会获得相同的正文。

在Sass中，Mixins和Extend功能有什么区别？

3 个答案: