sass学习(二)：注释，混合器与继承

一 静默注释

注释可以作为简单的样式说明，解释你当时为什么这样写，但是你不一定希望浏览网站的每个人都能看到你的注释，sass提供一种注释方式，当在生成css时会自动抹去注释，即使用//进行注释，而使用/* */进行注释时则会在css文件中显示注释，除非/* */使用在原生css不该放置的地方，如属性和选择器中，注释会被抹去。

二 混合器

当你的工程中需要重复使用大量相同的样式时，单单使用变量是无法解决的，这时可以使用混合器（标示符为@mixin）来使用重复的样式，在调用处使用@include＋name进行调用，此时相当于把@mixin里面的样式放在@include的位置上，但是过量的使用混合器会导致样式表过大，加载缓慢，所以首先我们要了解使用场景。

1.何时使用

当你发现自己在重复使用一段样式，那么就应该构建一个优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如是放在一起有意义的一组属性，对于何时使用这个问题，经验之谈就是你很容易为你的混合器起名字，因为你的混合器最好是用来实现某个具体样式的，如rounded-corners，使用语义化命名更加便于使用。

2.选择器的css规则

选择器里面不仅可以包含属性，也可以包含css规则，如选择器和选择器中的属性，甚至可包含父选择器标示符&。

3.混合器传参或默认

混合器传参：@include可以像javascript的函数一样进行传参，可以直接传入，也可以使用$name: value的形式，这样的话，不需要按照原参数顺序指定value，举例如下：

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

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

默认参数值：传入的参数值可以是默认的，举例如下：

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

若调用@include link-colors(red) 那么$hover, $visited会被自动赋值为red。

三 选择器继承

选择器继承是指一个选择器可以继承另一个选择器的所有样式，使用@extend＋name实现，选择器的继承不仅实现继承本身的样式，也会继承与之组成的组合选择器的样式。
1.何时使用继承

一般继承建立在语义化的基础上，当一个类明显属于另一个类时，使用继承再合适不过了。

2.用法

可以继承一个html元素的样式，在继承时，若@extend后面是.important.error那么只会继承这两个类下面的共有的样式，不会分别继承.important 和.error下的样式。

3.细节

继承比混合器所占体积更小，会使得站点的速度更快，当使用继承发生样式冲突时，按照层叠的规则选择。

4.最佳实践

不要使用后代选择器去继承，否则css选择器中的数量很快就会失控。