本文内容来自官网文档:
https://www.sass.hk/docs/
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的class,比如.float-left。混合指令可以包含所有的CSS规则,绝大部分Sass规则,甚至通过参数功能引入变量,输出多样化的样式。
定义混合指令@mixin
mixin.scss
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
color: #ff0000;
引用混合指令@include
使用@include指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选)。
main.scss
@import "mixin";
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }