Sass mixin与extends、%placeholder、function

一、Sass mixin与extend的区别及适用场景

@mixin用于定义复用样式片段，使用@include引用mixin。与其类似，@extend命令让一个选择器继承其它选择器样式实现复用样式片段。

那么什么时候使用mixin，什么时候使用extend？下面做个分析对比。

1、@mixin的作用：

（1）可以定义公用样式

编译出来的css如下：

（2）可以接收代码片段

mixin可以通过@content接收引用者所需要传入的代码片段，比如：

代码中名为button-style的mixin不接受参数，设置了@content，.test在调用此mixin时传入了background:red；编译成css后，代码如下：

（3）可以传递参数

编译出来的css如下：

2、@extend的作用
（1）继承其它选择器样式

编译后对应css为：

是不是觉得跟mixin的（1）作用很像？是的假如mixin只是用来定义一个公用的样式块，不接收参数不接收代码片段，在实现功能上是一样的，都是复用了公用样式，但是长得不一样。@extend会把当前调用@extend的选择器拼接到公用样式的选择器后边，使其拥有公用样式的功能，而@mixin定义的是看不到的，当前调用@mixin的那个选择器会复制一份@mixin中的代码过来，从而拥有公用样式功能（还是直接看编译出来的css好理解）。

结论：@mixin功能比@extend强大很多，@extend不能传递参数，继承过来的东西是什么就是什么，不灵活。如果没有任何参数，选@extend或者@mixin都可以，如果有参数要传递，要公用的样式更灵活一些，还是使用mixin靠谱。

二、Sass %(placeholder/占位符)

举个例子，假设在sass中定义了一个基类.button-style，如下

编译出来的css文件如下：

可见，我们在sass文件中定义了一个.button-style基类，我们还没有继承它，但是他却出现在了编译后的css中，原因是基类其实也是一个选择器+样式，被按照常规的css编译了。那么我们让我们想定义的基类和普通样式区分开来呢？%(placeholder/占位符)登场，写法如下：

编译出来的css如下：

可见我们虽然定义了一个公用的button-style，但是我们没有继承的话，样式不会被编译。
以下为继承了的情况：

编译出来的css：

三、Sass function

function是什么？这么说感觉好理解一些：上边我们提到的@mixin、@extend、%的内容都是自己定义的，而function是sass本身内置的函数，返回的是一个值。
如percentage方法：

编译后的css：

详细function可参考文档：http://sass-lang.com/documentation/Sass/Script/Functions.html