Sass @mixin 与 @include

Sass Mixins

@mixin 指令让您可以创建在整个网站中重用的 CSS 代码。

@include 指令让您可以使用（包括）mixin。

定义 Mixin

使用 @mixin 指令来定义一个 Mixin。

Sass @mixin 语法:

 @mixin <i>name </i>{
  property :  value ;
  property :  value ;
  ...
}

下面的示例创建一个名为 "important-text&quot 的 mixin:

SCSS 语法:

 @mixin  important-text {
 color:  red;
 font-size: 25px;
 font-weight: bold;
 border: 1px solid blue;
}

使用 Mixin

@include 指令用来包含（include）一个 mixin

Sass @include mixin 语法:

 selector  {
 @include  mixin-name ;
 }

因此，要包含（include）上面创建的 "important-text" mixin:

SCSS 语法:

.danger {
 @include  important-text;
 background-color: green;
}

Sass transpiler 将转化成一下普通 CSS:

CSS 输出:

.danger {
 color:  red;
 font-size: 25px;
 font-weight: bold;
 border: 1px solid blue;
 background-color: green;
}

一个 mixin 也能包含（include）另外一个 mixins:

SCSS 语法:

 @mixin special-text {
 @include  important-text;
 @include  link;
 @include  special-border;
}

将变量传递给 Mixin

Mixin 是可以接受参数的。通过这种方式，您可以将变量传递给一个 mixin。

下面是如何使用参数定义 mixin:

SCSS 语法:

/* 定义一个带两个参数的 mixin */
@mixin bordered($color, $width) {
 border:  $width solid $color;
}
.myArticle {
 @include bordered(blue, 1px);  // 传入两个参数调用 mixin
}
.myNotes {
 @include bordered(red, 2px); // 传入两个参数调用 mixin
}

请注意，参数设置为变量，然后用作 border 属性的值（颜色和宽度）。

编译后，CSS 将如下所示:

CSS 输出:

.myArticle {
 border: 1px solid blue;
}
.myNotes {
 border: 2px solid red;
}

Mixin 的默认值

也可以为 mixin 变量定义默认值:

SCSS 语法:

@mixin bordered($color: blue, $width:  1px) {
 border:  $width solid $color;
}

然后，您只需要指定在包含（include）mixin 时要更改的值:

SCSS 语法:

.myTips {
 @include bordered($color: orange);
}

使用 Mixin 实现 Vendor Prefix

mixin 的另一个好用法是用于 Vendor Prefix（浏览器引擎前缀，是一些放在 CSS 属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。）。

这是一个 transform 的例子:

SCSS 语法:

@mixin transform($property) {
 -webkit-transform: $property;
 -ms-transform: $property;
 transform: $property;
}
.myBox {
 @include transform(rotate(20deg));
 }

在编译之后, CSS 会是这样:

CSS 输出:

.myBox {
 -webkit-transform: rotate(20deg);
 -ms-transform:  rotate(20deg);
 transform: rotate(20deg);
}