一、 介绍
将公共的CSS提取出来，可以简化CSS的编写，一般将mxin单独写在一个叫mixin.scss文件当中，全局引入。
二、 用法
1. 基础Mixin
<div class="mixin1">mixin1</div>
@mixin red {
color:red;
}
.mixin1 {
@include red();
}
2. 函数Mixin
<div class="mixin2">mixin2</div>
@mixin color($color) {
color: $color;
}
.mixin2 {
@include color(blue);
}
3. 条件Mixin
<div class="mixin3">mixin3</div>
@mixin option($option) {
@if $option==1 {
color: yellow;
}
@else if $option==2 {
color: green;
}
@else {
color: black;
}
}
.mixin3 {
@include option(2);
}
网友评论