sass入门（三）

二. 混合器
当样式变得越来越复杂，需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了，这时可以通过sass的混合器实现大段样式的重用。
为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示。

@mixin rounded-corners { /*定义混合器，目的是添加跨浏览器的圆角边框*/
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/*在样式表中通过@include来使用这个混合器，放在你希望的任何地方*/
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;
}

如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器.

1. 混合器中使用css规则：

 @mixin no-bullets {
  list-style: none;
  li { /*混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性*/
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}
/*最终，上边的例子如下代码: */

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

如果一个混合器只包含css规则，不包含属性，那么这个混合器就可以在文档的顶部调用.

2. 给混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

/*Sass最终生成的是：*/

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

a {
    @include link-colors( /*这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数*/
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

3. 赋默认值

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用

@mixin link-colors($normal, $hover: $normal, $visited: $normal)
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

//如果像下边这样调用：@include link-colors(red) $hover和$visited也会被自动赋值为red。