Sass @mixin 和 @include

Sass Mixin

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

创建 @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

@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

Mixins 接受参数。通过这种方式,您可以将变量传递给 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 将如下:

CSS 输出:

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

Mixin 的默认值

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

SCSS 语法:

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

然后,您只需要指定引用 mixin 时要更改的值:

SCSS 语法:

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

使用 Mixin 作为供应商前缀

mixin 的另一个很好的用途是(浏览器)供应商前缀。

这是一个转换的例子:

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);
}