Sass: @mixin vs placeholder vs @function

学习 Sass 的时候总会发现这三个东西很像，由于他们都是用来统一代码来达到复用的目的的。这篇文章将用一个小例子来比照他们的不同之处。

例子

我们要做的就是两个一大一小的两个 div，一个宽高100px，另一个宽高 300px。

<div class="box smallBox"></div><div class="box bigBox"></div>

CSS 代码可以写成这样：

.smallBox {  width: 100px;  height: 100px;  box-shadow: 0px 0px 5px black;  margin: 10px;}.bigBox {  width: 300px;  height: 300px;  box-shadow: 0px 0px 5px black;  margin: 10px;}

很显著这代码太过于复杂，很多代码都很相似的。

Mixin

Mixin 可以传入参数，直接复制属性到每个选择器里。

@mixin box($width: 100px, $height: 100px) {  width: $width;  height: $height;  box-shadow: 0px 0px 5px black;  margin: 10px;}.smallBox {  @include box(100px, 100px);}.bigBox {  @include box(300px, 300px);}

生成的 CSS 如下，可以看到 Mixin 只不过是将一块代码做了复制。

生成 CSS 结果

Placeholder

Placeholder 与 Mixin 差不多，但是不能传入参数。而且他不是直接复制代码块，而是将共有的属性提到前面，而后使用这两个 div 的选择器一起去调用。

%box {  box-shadow: 0px 0px 5px black;  margin: 10px;}.smallBox {  @extend %box;  width: 100px;  height: 100px;}.bigBox {  @extend %box;  width: 300px;  height: 300px;}

生成的 CSS 代码如下:

生成 CSS 结果

可以看到这比 Mixin 要省很多代码，由于不会将代码块每次都做复制，所以一般推荐这种写法。

@function

Sass 的函数主要用于属性值的复用，如一起变大，一起变小。如下面的的可以一起将原来的值一都变成 2 倍大。

@function px($value) {  @return $value * 2 + px}.smallBox {  width: px(50);  height: px(50);}.bigBox {  width: px(150);  height: px(150);}

函数主要用于：

1. 使得属性值可以复用
2. 如数值的统一计算