Sass @mixin 和 @include
Sass Mixins
The @mixin directive lets you create CSS code that is to be reused throughout the website.（`@mixin` 指令允许你创建可在整个网站中重用的 CSS 代码。）
The @include directive is created to let you use (include) the mixin.（`@include` 指令用于使用（包含）mixin。）
Defining a Mixin（定义 Mixin）
A mixin is defined with the @mixin directive.（Mixin 使用 `@mixin` 指令定义。）
Sass @mixin Syntax（Sass @mixin 语法）
@mixin name {
property: value;
property: value;
...
}
The following example creates a mixin named "important-text"（下面的示例创建一个名为“important-text”的 mixin）
SCSS Syntax（SCSS 语法）
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Tip: A tip on hyphens and underscore in Sass: Hyphens and underscores are considered to be the same. This means that @mixin important-text { } and @mixin important_text { } are considered as the same mixin!（**提示：** 关于 Sass 中连字符和下划线的说明：连字符和下划线被视为相同。这意味着 @mixin important-text { } 和 @mixin important_text { } 被视为同一个 mixin！）
Using a Mixin（使用 Mixin）
The @include directive is used to include a mixin.（`@include` 指令用于包含 mixin。）
Sass @include mixin Syntax（Sass @include mixin 语法）
selector{
@include mixin-name;
}
So, to include the important-text mixin created above（所以，要包含上面创建的 important-text mixin）
SCSS Syntax（SCSS 语法）
.danger {
@include important-text;
background-color: green;
}
The Sass transpiler will convert the above to normal CSS（Sass 编译器会将上面的代码转换为常规 CSS）
CSS output（CSS 输出）
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
A mixin can also include other mixins（Mixin 也可以包含其他 mixin）
SCSS Syntax（SCSS 语法）
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
Passing Variables to a Mixin（将变量传递给 Mixin）
Mixins accept arguments. This way you can pass variables to a mixin.（Mixin 接受参数。这样你就可以将变量传递给 mixin。）
Here is how to define a mixin with arguments（以下是如何定义带参数的 mixin）
SCSS Syntax（SCSS 语法）
/* Define mixin with two arguments（/* 定义带有两个参数的 mixin */）*/
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Call mixin with two values（// 使用两个值调用 mixin）
}
.myNotes {
@include bordered(red, 2px); // Call mixin with two values（// 使用两个值调用 mixin）
}
Notice that the arguments are set as variables and then used as the values (color and width) of the border property.（请注意，参数被设置为变量，然后用作 border 属性的值（颜色和宽度）。）
After compilation, the CSS will look like this（编译后，CSS 将如下所示）
Default Values for a Mixin（Mixin 的默认值）
It is also possible to define default values for mixin variables（也可以为 mixin 变量定义默认值）
SCSS Syntax（SCSS 语法）
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
Then, you only need to specify the values that change when you include the mixin（然后，当你包含 mixin 时，只需要指定要更改的值）
SCSS Syntax（SCSS 语法）
.myTips {
@include bordered($color: orange);
}
Using a Mixin For Vendor Prefixes（使用 Mixin 处理供应商前缀）
Another good use of a mixin is for vendor prefixes.（Mixin 的另一个好用途是处理供应商前缀。）
Here is an example for transform（这里是一个关于 transform 的示例）
SCSS Syntax（SCSS 语法）
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
After compilation, the CSS will look like this（编译后，CSS 将如下所示）
CSS Output（CSS 输出）
.myBox {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
