在Sass中,Mixins和Extend功能之间有什么区别?

在Sass中,Mixins和Extend功能之间有什么区别?

问题描述:

我刚刚完成了sass 指南
指南解释了混合器:

I'd just finished with the sass guide. The guide explains mixins:


.. mixin使您可以创建要用于
的CSS声明组在整个网站上重复使用。您甚至可以传递值以使
混合更灵活。

..A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

并扩展:


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

.. This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another ..

它看起来像扩展'可以在'mixin'中实现(似乎'mixin'是'extend'的扩展:-))。

It looks like 'Extend' may be implemented in 'mixin' (it seems 'mixin' is extend of '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); }

甚至更多,因为混合具有参数。
,但另一方面,处理后的CSS并不完全相同。

and even more because mixing have params. but on the other hand the processed css is not exactly the same. but it will be same style effect on the 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; }

我的问题是这与功能有何不同?
什么时候应该在另一个上使用?

My question is where this to features differ? When should I use one over the other?

这是从 http://blog.nakulrajput.com/mixins-extends-and-placeholders/

@mixin

这里是 mixin的工作方式。定义和用法:

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

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

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

The snippets above produce the following code.

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

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

To make the things a little bit more interesting we could make our mixin accepting parameters. Even better we are able to define default values if the mixin is called without arguments.

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

body {
    @include awesome(960px);
}
p {
    @include awesome;
}

结果将相似,但是主体的宽度不同。

The result will be similar, but the width of the body is different.

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




如果使用mixins,则其中的样式为在您的
类中都重复了

If you use mixins the styles in them are duplicated all over your classes

如果您需要更改或计算最终输出中的某些内容,则mixins非常有用。 例如,,如果您需要将边界半径应用于多个元素。
但是,在其他情况下,有很多重复的代码,如果您使用 @extend 可以避免。

The mixins are very helpful if you need to change or calculate something in the final output. For example, if you need to apply border-radius to several elements. However, in some other cases there is a lot of duplicating code, which could be avoided if you use @extend.

**@extend**

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

body {
    @extend .awesome;
}
p {
    @extend .awesome;
}

是类似的,不是吗。在SASS中看起来几乎相同,但在CSS中的结果是:

It's similar, isn't it. In SASS it looks almost identical, but in the CSS the result is:

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

先缩小然后使用mixin版本。您无法在扩展过程中传递参数,但实际上并非如此。

Shorten then the version using a mixin. You can't pass parameters during the extending, but that's not the idea actually.


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

@extend should be used in those places where you want to share properties between the elements.