sass中的mixin

1. 没有传参的mixin

sass中的mixin有点类似js中的函数，可以定义一个功能，在别的地方调用
语法： @mixin 名字（参数）{...} 调用的时候 @include 名字（参数）

例：
style.scss文件

@mixin primary {
    color:red;
    background-color: #fff;
    a {
        font-size: 16px;
    }
}

body {
    @include primary;
}

输出之后的style.css文件

body {
  color: red;
  background-color: #fff;
}
body a {
  font-size: 16px;
}

2. 传参的mixin

注意： mixin中的参数定义的时候要加上$,和变量定义类似

例：
style.css文件

@mixin alert($textclolor, $bgcolor) {
    color: $textclolor;
    background-color: $bgcolor;
    a {
        color: darken($textclolor, 10%);
    }
}

body {
    @include alert(#f40, #f2f2f2);
}

输出的style.css文件

body {
  color: #f40;
  background-color: #f2f2f2;
}
body a {
  color: #cc3600;
}

这里用到了一个darken()函数，这个函数是在原基础上加深一定的颜色