Sass Mixins
Sass Mixins
Sass Mixins可帮助您制作要在站点上重复使用的CSS声明组。您甚至可以根据需要传递值，以使mixin更加灵活。
mixin可以存储多个值或参数，并可以调用函数以避免编写重复的代码。混合名称可以下划线和连字符互换使用。
让我们以边界半径为例。此示例指定如何在边界半径中使用mixin以便在您的网站中重复使用它。
SCSS语法:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
等效的Sass语法:
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)
在这里，我们使用mixin指令并将其命名为border-radius。括号内使用变量$ radius根据或需要传递半径。创建mixin之后，您可以将其用作CSS声明。它以@include开头，后跟mixin的名称。生成的CSS如下所示:
CSS语法:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Mixin中存在的指令
Mixin中存在的指令列表:
| 指令 |
说明 |
| 定义mixin |
@mixin指令用于定义mixin。 |
| 包含mixin |
@include指令用于在文档中包括混合。 |
| 参数 |
Argments是SassScript值，当包含mixin并将其作为变量使用时，可以在mixins中采用。 |
| 将内容块传递到mixin |
它指定传递给mixin的样式块。 |
