1.mixin什么
css中的mixin和vue中的mixin有些类似,都能够减少重复代码,提高代码利用率。 简单说,就是定义一段共用代码,然后在其他地方引用它。
2.具体用法
@mixin font-title($font-size,$font-weight) {
font-size: $font-size;
font-weight: $font-weight;
color: #ffffff;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.text {
@include font-title(16px,800)
}
使用@mixin定义,@include引用
渲染之后为:
.text {
font-size: 16px;
font-weight: 800;
color: #ffffff;
text-align: center;
white-space: nowrap;
overflow: hidden;
}