@include
# @include
引用混合样式 @include (Including a Mixin: @include)
使用 @include
指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
1
2
3
4
5
2
3
4
5
编译为
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }
1
2
3
4
5
6
7
2
3
4
5
6
7
也可以在最外层引用混合样式,不会直接定义属性,也不可以使用父选择器。
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;
1
2
3
4
5
6
7
2
3
4
5
6
7
编译为
a {
color: blue;
background-color: red; }
1
2
3
2
3
混合样式中也可以包含其他混合样式,比如
@mixin compound {
@include highlighted-background;
@include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
1
2
3
4
5
6
2
3
4
5
6
混合样式中应该只定义后代选择器,这样可以安全的导入到文件的任何位置。