SCSS MiXin用法

一、 介绍

将公共的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);
}