一、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

總結

以上是生活随笔為你收集整理的Sass mixin与extends、%placeholder、function的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。