指定混合指令@mixin
# 指定混合指令@mixin
混合指令的用法是在 @mixin
后添加名称与样式,比如名为 large-text
的混合通过下面的代码定义:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
混合也需要包含选择器和属性,甚至可以用 &
引用父选择器:
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11