什么是 SASS mixin
SASS mixin 是一种代码重用的方式，可以将一段 CSS 代码片段封装成一个 mixin，然后在需要使用的地方调用这个 mixin，从而避免代码重复和写错。SASS mixin 可以接受参数，可以使用默认值，可以嵌套调用，非常灵活。
SASS mixin 的基本语法
定义一个 mixin：
@mixin mixin-name($param1, $param2: default-value) {
// mixin code here
}调用一个 mixin：
@include mixin-name(value1, $param2: value2);
其中，$param1 是必需的参数，$param2 是可选参数，可以使用默认值。@include 是调用 mixin 的关键字。
SASS mixin 的使用方法
1. 将重复的代码封装成 mixin
比如，我们需要在不同的地方设置相同的 CSS 样式：
-- -------------------- ---- ------- ------- - ----------------- -------- ---------- ----- ------ ----- -------- ----- - ------- - ----------------- -------- ---------- ----- ------ ----- -------- ----- - -------- - ----------------- -------- ---------- ----- ------ ----- -------- ----- -
可以将相同的代码封装成一个 mixin：
-- -------------------- ---- ------- ------ ----------- - ----------------- -------- -------- ----- - ------- - -------- ------------ ---------- ----- ------ ----- - ------- - -------- ------------ ---------- ----- ------ ----- - -------- - -------- ------------ ---------- ----- ------ ----- -
这样，我们只需要维护一个 mixin，就可以在多个地方使用了。
2. 使用 mixin 的参数
比如，我们需要设置一些带有前缀的 CSS 属性：
.header {
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}可以将带有前缀的部分封装成一个 mixin，并且接受参数：
-- -------------------- ---- ------- ------ -------------- -- --- ---- ------ ---- ------- ------- -- -- ----- - ------------------- -- -- ----- ------- ---------------- -- -- ----- ------- ----------- -- -- ----- ------- - ------- - -------- ------------- ---- ---- ------- -- -- ------ -
这样，我们可以在调用 mixin 的时候传入不同的参数，从而生成不同的 CSS 样式。
3. 嵌套调用 mixin
SASS 中可以嵌套调用 mixin，这样可以让代码更加简洁和易读。比如，我们需要设置一个带有前缀的 transition：
.header {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}可以将带有前缀的部分封装成一个 mixin，并且嵌套调用：
-- -------------------- ---- ------- ------ --------------------- ---------- ----- ----------------- ------------ - ------------------- --------- --------- ----------------- ---------------- --------- --------- ----------------- ----------- --------- --------- ----------------- - ------- - -------- ---------------- -
这样，我们只需要传入一个参数，就可以生成带有前缀的 transition。
SASS mixin 的相关技巧
1. 使用 !optional 关键字
SASS 中可以使用 !optional 关键字来指定参数为可选参数。如果传入了这个可选参数，则使用传入的值，否则使用默认值。比如：
-- -------------------- ---- ------- ------ ------------ ------- -- -------- -- ------ - ---------- - ------- ---- ------ ------- ------ - ------- - -------- ------------- -- ------- ---- - - -- - ------- - -------- ------------ ------ -- ------- ---- ---- - -- - -------- - -------- ------------ ----- ------ -- ------- ---- ---- ---- -- -
2. 使用 @content
SASS 中可以使用 @content 关键字来传递代码块。比如：
-- -------------------- ---- -------
------ ------------- -
------ --------- -
---------
-
-
-------- ---------------- ------ -
------- -
---------- -----
-
-这样，我们可以在 mixin 中嵌套调用任意代码块。
总结
SASS mixin 是一种非常实用的代码重用方式，可以让代码更加简洁和易读。在使用 SASS mixin 的时候，我们需要注意参数的使用和嵌套调用的技巧，从而让代码更加灵活和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660a14acd10417a2228e8d05