sass基础--混合器

1.多出用到重复性代码时，可以用混合器@minxin来定义，通过@include来调用定义过的混合器样式

//添加跨浏览器的圆角边框
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
引用时：
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

2. 混合器中可以传参进行修改，写法类似函数

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}

编译后为：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

例子2：参数使用key-value
@mixin link-colors($normal, $hover: $normal, $visited: $normal){
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
结果：@include link-colors(red) $hover和$visited也会被自动赋值为red