.css 文件中的“@include”是什么意思？

【问题标题】：What is the meaning of the "@include" in .css Files?.css 文件中的“@include”是什么意思？
【发布时间】：2017-01-11 17:05:02
【问题描述】：

我不明白，.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);
}

【问题讨论】：

标签： css sass

【解决方案1】：

@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 是存储特别是诸如供应商前缀之类的内容的快捷方式。上面的 CSS 输出将是：

.box {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
            border-radius: 10px;
}

【讨论】：