Sass: @mixin vs placeholder vs @

学习 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. 如数值的统一计算