考慮到sass自定義函數(shù)用到地方比較多，并且后續(xù)需要單獨(dú)拿出來和Mixin、extend進(jìn)行比較，所以將原本屬于上一篇《Sass函數(shù)功能匯總》的這部分知識，在這里另開篇幅了。

【Sass函數(shù)功能匯總】：http://www.itdecent.cn/p/ef2ca6fbf944

1. 創(chuàng)建和使用自定義函數(shù)

Sass和其他腳本語言有類似之處，可以利用變量來構(gòu)建自己的函數(shù)，這使Sass可以像寫JavaScript那樣擁有自己的邏輯。下面是Sass自定義函數(shù)的基本結(jié)構(gòu)：

@function function-name($args) {
    @return value-to-be-returned;
}
body{
  font-size: function-name($args);
}

• 創(chuàng)建自定義函數(shù)需要兩個Sass指令， @function和 @return。前者創(chuàng)建函數(shù)，后者表明了函數(shù)將返回的值
• function-name代表函數(shù)名，在Sass中function-name和 function_name是相同的函數(shù)，所以可使用破折號或下劃線調(diào)用函數(shù)，無論命名時使用的是哪個。
• 傳遞到函數(shù)中的參數(shù)$args是可選的，通常會使用傳遞過去的參數(shù)進(jìn)行運(yùn)算，也可能是一些所有函數(shù)都可以訪問的全局變量。

//SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width(3, 8);
}
.col-5 {
  width: column-width(5, 8);
}

//CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 62.5%; }

2. 關(guān)鍵字參數(shù)

傳參的時候有時候會不知道每個參數(shù)是什么意思，參數(shù)之間是一個什么樣的順序。為了解決這個問題，Sass允許通過語法$name: value的形式指定每個參數(shù)的值。這種形式的傳參，參數(shù)順序就不必再在乎了，只需要保證沒有漏掉參數(shù)即可：

//SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:3, $total:8);
}
.col-5 {
  width: column-width($total:5,$col:8);
}

//CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 160%; }

3. 默認(rèn)參數(shù)

為了在使用函數(shù)是不必傳入所有的參數(shù)，我們可以給參數(shù)指定一個默認(rèn)值。參數(shù)默認(rèn)值使用$name: default-value的聲明形式，默認(rèn)值可以是任何有效的css屬性值，甚至是其他參數(shù)的引用。

//SCSS
@function column-width($col:3, $total:8) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:2, $total:4);
}
.col-5 {
  width: column-width();
}

//CSS
.col-3 {  width: 50%; }
.col-5 {  width: 37.5%; }