学习 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);
}
函数主要用于：
- 使得属性值可以复用
- 如数值的统一计算
