Sass学习之路(7)——混合宏

在Sass的使用中，如果整个网站中有一些小的样式类似，比如字体、宽高、颜色，可以通过变量来统一处理。

但是当我们需要重复使用大段的样式时，使用变量就不能很方便的处理了，这时，Sass的混合宏就体现出了他的作用。

1.声明混合宏

无参混合宏：

@mixin border-radius {    -webkit-border-radius: 10px;    border-radius: 10px;}

可以看出声明方式有点类似于@keyframe

@mixin是用来声明混合宏的关键词(@迷信 ╮(￣▽￣")╭)

border-radius是混合宏的名称

大括号内是要拿来复用的样式代码。

带参混合宏:

@mixin border-radius($radius:8px){    -webkit-border-radius: $radius;    border-radius: $radius;}

传参方式看起来和JS里的函数差不多。

复杂混合宏(带逻辑关系)：

@mixin box-shadow($shadow...) {  @if length($shadow) >= 1 {    @include prefixer(box-shadow, $shadow);  } @else{    $shadow:0 0 4px rgba(0,0,0,.3);    @include prefixer(box-shadow, $shadow);  }}

这里解释一下，当混合宏带有多个参数时，可以用"..."代替

大括号内是一个if...else的判断，意思是说当参数个数大于等于1时，就把参数中阴影值设置给box-shadow,否则就使用自己默认定义的$shadow的值。

2.混合宏的调用

通过@mixin声明的混合宏，通过@include关键词调用。

比如声明一下无参混合宏：

@mixin border-radius{    -webkit-border-radius: 3px;    border-radius: 3px;}

想在按钮中调用，设置圆角：

button {    @include border-radius;}

最终编译出的CSS如下：

button {  -webkit-border-radius: 3px;  border-radius: 3px;}

3.混合宏的参数使用

A.单个参数：

@mixin border-radius($radius){  -webkit-border-radius: $radius;  border-radius: $radius;}

调用的时候可以根据需要传入一个参数值:

.box {  @include border-radius(3px);}

这时编译出来的css便是：

.box {  -webkit-border-radius: 3px;  border-radius: 3px;}

当然也可以在声明混合宏时，给参数给一个默认值：

@mixin border-radius($radius:3px){  -webkit-border-radius: $radius;  border-radius: $radius;}

这样，调用函数时，在不写参数的情况下，会默认为3px。也可以写参数来默认的3px的值。

B.多个参数：

@mixin center($width,$height){  width: $width;  height: $height;  position: absolute;  top: 50%;  left: 50%;  margin-top: -($height) / 2;  margin-left: -($width) / 2;}

这里声明了两个参数(细心的童鞋也许发现了，这个混合宏是用来让元素居中的)，调用如下：

.box-center {  @include center(500px,300px);}

方法依然和js的function差不多。

这里要说一种比较特别的情况，那就是参数不确定的时候，比如阴影的数量，可以是一个，也有一个元素上有多个阴影的情况，这时我们声明混合宏时就要使用“...”来代表多个参数。如下：

@mixin box-shadow($shadows...){  @if length($shadows) >= 1 {    -webkit-box-shadow: $shadows;    box-shadow: $shadows;  } @else {    $shadows: 0 0 2px rgba(#000,.25);    -webkit-box-shadow: $shadow;    box-shadow: $shadow;  }}

调用：

.box {  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));}

最后的编译结果是：

.box {  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);}

这样便在不确定阴影个数的情况下，也能够顺利的传入参数了。

4.混合宏的缺点

混合宏最大的不足，就是会产生冗余的代码块，因为当多出调用同一个混合宏时，编译出的CSS代码不会对相同样式进行合并，举个栗子：

Sass代码如下：

@mixin border-radius{  -webkit-border-radius: 3px;  border-radius: 3px;}.box {  @include border-radius;  margin-bottom: 5px;}.btn {  @include border-radius;}

最终编译出来的Css是这样的:

.box {  -webkit-border-radius: 3px;  border-radius: 3px;  margin-bottom: 5px;}.btn {  -webkit-border-radius: 3px;  border-radius: 3px;}

可以看出样式相同的代码块并不会自动合并在一起，这是混合宏最大的不足之处。