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

你可能感兴趣的:(sass学习6——混合器)