sass学习6——混合器

sass混合器用来实现大段样式的重用，用@mixin标识符定义。

```例子：添加跨浏览器的圆角边框```

@mixin rounded-corners {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

通过@include来使用混合器。@include调用会把混合器中d所有样式提取出来放在@include被调用的地方。

.mycss01 {
    background-color: #ccc;
    color: #000;
    @include rounded-corners;
}

编译完成后css代码：

image.png

注意啦：虽然混合器很好用，但是一不小心就可能过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，应避免滥用。如在不停地重复一段样式时就应该把这段样式构造成优良的混合器，尤其这段样式本身就是一个逻辑单元。
判断一组属性是否应该组成一个混合器，经验法则就是能否为这个混合器想出一个好的名字。如rounded-corners、fancy-font或者no-bullets等。

混合器中的css规则

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

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

ul.plain {
    color: #ccc;
    @include no-bullets;
}
```生成的样式```

image.png

给混合器传参

混合器并不一定总得生成相同的样式，可以通过在@include混合器时传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过js,这种方式跟js 里的function 很像：

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

最后生成样式

image.png

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

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

默认参数

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

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

a {
    @include link-colors()
}

生成代码

image.png

如果引用改为如下代码将生成css如下

a {
    @include link-colors(#ccc)
}

image.png