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;
}

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