如何让 scss 代码可复用？三种复用方式分别用在何处？下方是一段自定义大小的样例 👇
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| $height: 15px !default;
$width: 18px !default;
@mixin size($list...) {
@if length($list) == 0 {
height: $height;
width: $width;
} @else if length($list) == 1 {
height: $list;
width: $list;
} @else if length($list) == 2 {
height: nth($list, 1);
width: nth($list, 2);
} @else {
@debug "Too many parameters";
}
}
|
1、继承和占位符
两者都是通过@extend来引用。
1.1 继承
一个已经存在的 css 样式类，可以被其他样式类继承。
例如，实现以下 css 样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
| .btn,
.btn--primary,
.btn--info {
border: 1px solid blue;
}
.btn--primary {
color: black;
}
.btn--info {
color: gray;
}
|
scss 中可以这样写，显然，这种写法便于维护和阅读！
1
2
3
4
5
6
7
8
9
10
11
12
13
| .btn {
border: 1px solid blue;
}
.btn--primary {
color: black;
@extend .btn;
}
.btn--info {
color: gray;
@extend .btn;
}
|
1.2 占位符
顾名思义，如果不被extend引用，它是不会被编译，也就是：不会占用 css 文件大小。这是和继承最大区别。
scss 代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| %btn {
border: 1px solid blue;
}
%test-btn {
border: 1px solid black;
}
.btn--primary {
color: black;
@extend %btn;
}
.btn--info {
color: gray;
@extend %btn;
}
|
编译后的 css 代码：
1
2
3
4
5
6
7
8
9
10
11
12
| .btn--primary,
.btn--info {
border: 1px solid blue;
}
.btn--primary {
color: black;
}
.btn--info {
color: gray;
}
|
2. 混合宏
scss 中的函数，通过关键字@mixin声明，@include引用。
2.1 参数设置和调用方式
无参调用
scss：
1
2
3
4
5
6
7
8
| @mixin btn {
border-radius: 3px;
}
.box {
color: white;
@include btn;
}
|
css：
1
2
3
4
| .box {
color: white;
border-radius: 3px;
}
|
参数调用
scss:
1
2
3
4
5
6
7
8
9
10
11
| $radius: 3px !default;
@mixin btn($radius: 5px) {
border-radius: $radius;
}
.box {
color: white;
@include btn($radius);
}
|
css:
1
2
3
4
| .box {
color: white;
border-radius: 3px;
}
|
参数过多的情况
当参数 2、3 个时候，可以通过@mixin size($width,$height)这样来调用。当参数过多，使用...符号。
scss:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| $height: 15px !default;
$width: 18px !default;
@mixin size($list...) {
@if length($list) == 0 {
height: $height;
width: $width;
} @else if length($list) == 1 {
height: $list;
width: $list;
} @else if length($list) == 2 {
height: nth($list, 1);
width: nth($list, 2);
} @else {
@debug "Too many parameters";
}
}
.btn--primary {
@include size();
}
.btn--big {
@include size(20px, 25px);
}
.btn--square {
@include size(18px);
}
.btn--test {
@include size(
1px,
2px,
3px,
4px
);
}
|
输出的 css 结果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .btn--primary {
height: 15px;
width: 18px;
}
.btn--big {
height: 20px;
width: 25px;
}
.btn--square {
height: 18px;
width: 18px;
}
|
2.2 好处和不足
混合宏最大的不足：会复用代码，造成 css 冗赘（可以尝试一下下方的测试代码）。
当然，符合宏可以传递参数这点很 nice。
可以编译下方代码，观察下结果：
1
2
3
4
5
6
7
8
9
10
11
12
13
| @mixin border-radius {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
margin-bottom: 5px;
}
.btn {
@include border-radius;
}
|
3. 版本
- scss:3.5.6
- ruby:2.4.4p296
