.css 文件中的“@include”是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39311744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the meaning of the "@include" in .css Files?
提问by daniel nasiri
I don't understand , what is the meaning of the @include tag in .css files. For Example :
我不明白，.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);
}
回答by jkemming
@includes are a part of SCSS, it's called Mixin. Here is an example:
@includes 是 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); }
@includes are a shortcut to storing especially things like vendor prefixes. The CSS output of the above will be:
@includes 是存储特别是供应商前缀等内容的快捷方式。上面的 CSS 输出将是：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
