Sass @mixin 和 @include
Sass Mixins
The @mixin 指令允许您创建将在整个网站中重复使用的 CSS 代码。
The @include 指令用于让您使用（包含）mixin。
定义 Mixin
Mixin 是使用 @mixin 指令定义的。
Sass @mixin 语法
@mixin name {
property: value;
property: value;
...
}
以下示例创建了一个名为“important-text”的 mixin
SCSS 语法
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
提示：关于 Sass 中连字符和下划线的提示：连字符和下划线被视为相同。这意味着 @mixin important-text { } 和 @mixin important_text { } 被视为同一个 mixin！
使用 Mixin
The @include 指令用于包含 mixin。
Sass @include mixin 语法
selector{
@include mixin-name;
}
因此，要包含上面创建的 important-text mixin
SCSS 语法
.danger {
@include important-text;
background-color: green;
}
Sass 编译器会将以上代码转换为正常的 CSS
CSS 输出
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
Mixin 也可以包含其他 mixin
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
}
请注意，参数被设置为变量，然后用作边框属性的值（颜色和宽度）。
编译后，CSS 代码将如下所示
Mixin 的默认值
也可以为 mixin 变量定义默认值
SCSS 语法
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
然后，您只需要在包含 mixin 时指定要更改的值
SCSS 语法
.myTips {
@include bordered($color: orange);
}
使用 Mixin 处理供应商前缀
Mixin 的另一个用途是用于供应商前缀。
以下是以 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);
}
