.css文件中“ \`include”的含义是什么?

CSS

村村

2020-03-23

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

第3098篇《.css文件中“ \`include”的含义是什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小宇宙 2020.03.23

@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); }

@includes是存储特别是诸如供应商前缀之类的东西的快捷方式。上面的CSS输出将是:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android