@include

# @include

引用混合样式 @include (Including a Mixin: @include)

使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
1
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

也可以在最外层引用混合样式,不会直接定义属性,也不可以使用父选择器。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
1
2
3
4
5
6
7

编译为

a {
  color: blue;
  background-color: red; }
1
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

混合样式中应该只定义后代选择器,这样可以安全的导入到文件的任何位置。

上次更新: 2022/6/21 下午5:45:21