sass学习笔记（5）

1.混合器中的css规则

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，eg：

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下面的sass代码，这个例子中使用了no-bullets这个混合器：

ul.plain {
    color:#444;
    @include no-bullets;
    }

sass 的@include 指令会将引入混合器的那行代码替换成混合器里面的内容。最终，上边的例子如下代码：

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

混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样，sass解开嵌套规则时，用父规则中的选择器替代&。

如果一个混合器只包含css规则，不包含属性，那么这个混合器就可以在文档的顶部调用，写在所有的css规则之外。如果你只是为自己写一些混合器，这并没有什么大的用途，但是当你使用一个类似于Compass的库时，你会发现，这是提供样式的好方法，原因在于你可以选择是否使用这些样式。

2.给混合器传参

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参。来定制混合器生成的精确样式当@include混合器时，参数其实就是可以赋值给css属性值的变量。和js的fn类似。

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

当混合器被@include 时，你可以把它当作一个css函数来传参。

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

//Sass最终生成的是:

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

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可:

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

尽管给混合器加参数来实现定制很好，但是有时有些参数我们没有定制的需要，这时候也需要赋值一个变量就变成很痛苦的事情了。所以sass允许混合器声明时给参数赋默认值。

3.默认参数值

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

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

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

混合器只是sass样式重用特性中的一个。我们已经了解到混合器主要用于样式展示层的重用，如果你想重用语义化的类呢？这就涉及sass的另一个重要的重用特性:选择器继承。