我不明白,.css 文件中的 @include 标签的含义是什么。 例如:
.wrapper {
display: flex;
width: 100%;
@include display(flex);
@include flex-direction(column);
@include align-items(center);
@include justify-content(center);
@include transition(all 2s linear);
}
@include
是SCSS的一部分,称为Mixin。这是一个例子:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
@include
是存储尤其是供应商前缀等内容的快捷方式。上面的 CSS 输出将是:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
就像 JavaScript 中具有可重用函数一样,maxins 允许您在 .scss 文件中具有可重用 css 声明。有关 scss 的更多信息这里。 @include 告诉 scss 使用提供的声明。下面是一个例子。
SCSS 代码
CSS 输出