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

o8x7eapl 于 2022-12-27 发布在其他

关注(0)|答案(4)|浏览(168)

我刚刚完成了Sass guide。指南解释了mixin：
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; }

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

css

来源：https://stackoverflow.com/questions/44498297/in-sass-whats-the-difference-between-the-mixin-and-extend-directives

4条答案

按热度按时间

mznpcxlj1#

从http://blog.nakulrajput.com/mixins-extends-and-placeholders/开始：

@混音*

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

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

body {
    @include awesome;
}

p {
    @include awesome;
}

上面的代码片段生成以下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 {
    width: 960px;
    height: 100%;
}

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

如果使用混合，则其中的样式将为每个选择器复制。
如果您需要在最终输出中更改或计算某些内容，* 例如，* 如果您需要将border-radius应用于多个元素，mixin将非常有用。
但是，在其他一些情况下，会有很多重复的代码，如果使用**@extend**，就可以避免这些代码。

**@extend**

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

body {
    @extend .awesome;
}

p {
    @extend .awesome;
}

很相似，不是吗？在Sass中看起来几乎一样，但是CSS的结果是：

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

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

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

赞(0）回复(0）举报 2022-12-27

xytpbqjk2#

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

赞(0）回复(0）举报 2022-12-27

iyfamqjs3#

在编程方面：
@include类似于使用或不使用参数调用函数
@extend类似于继承
函数意味着，每次我们调用函数时，函数体都会被复制，因为我们可能会以参数的形式传递动态信息，所以你会得到函数体的副本。
继承意味着，没有复制，我们得到一个引用而不是复制。所以谁扩展了引用将得到相同的主体。

赞(0）回复(0）举报 2022-12-27

yzuktlbb4#

我认为mixin喜欢函数，因为我们可以使用或不使用参数
像复制代码一样扩展并推送到

赞(0）回复(0）举报 2022-12-27

我来回答

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

4条答案

相关问题

热门标签

最新问答