SCSS 函式

scss本身帶有大量的內建函式，具體可以參閱官網函式模組。

可能有時候，內建的函式並不能夠完全滿足我們的需求，那麼我們也自定義函式。

語法結構:

[Scss] 純文字檢視 複製程式碼
@function function-name($args) { 
  @return value-to-be-returned; 
}

@function開頭宣告一個函式，函式內部使用@return返回一個值，引數可以省略。

總體來講scss中的函式和JavaScript中的函式大同小異，並且具備某些ES2015函式的特點。

函式可以放置在想要使用函式返回值的地方，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
div { 
  font-size: font-size($args); 
}

特別說明:scss函式名中的中劃線和下劃線是等同的，font-size和font_size指向同一個函式。

[Scss] 純文字檢視 複製程式碼
@function column-width($col, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(3, 8); 
}

上面程式碼演示了，向函式中傳遞引數的應用，編譯後的程式碼如下:

[CSS] 純文字檢視 複製程式碼
.col-3 {
  width: 37.5%;
}

預設引數:

ES2015對函式的擴充套件中加入預設引數，scss也具有類似的功能。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(); 
}

引數名稱後面跟著一個冒號，冒號後面就是規定的預設引數值；函式呼叫時，對應的引數沒有傳遞值，那麼就使用預設引數值，上面程式碼編譯結果如下:

[CSS] 純文字檢視 複製程式碼
.col-3 {
  width: 37.5%;
}

再來看一段程式碼例項:

[Scss] 純文字檢視 複製程式碼
@function column-width($col:3, $total) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

上面的程式碼會報錯，函式呼叫時只傳遞了一個引數，但是函式宣告時規定了兩個引數，並且第二個引數沒有預設值，也就是說函式呼叫時所傳遞的引數必須和宣告時規定的引數對應起來。

[Scss] 純文字檢視 複製程式碼
@function column-width($col:3, $total:8) { 
  @return percentage($col/$total); 
}
.col-3 { 
  width: column-width(4); 
}

傳遞的引數會覆蓋預設的引數，所以4會覆蓋3，第二個引數使用預設值。

編譯結果如下:

[CSS] 純文字檢視 複製程式碼
.col-3 {
  width: 50%;
}

函式rest引數:

給函式傳遞的引數個數也許不是固定的，或者不能預知為函式傳遞引數的個數。

scss函式的rest引數將會很好的解決此問題（與ES2015為函式新增特性非常類似）。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
@function column-width($index, $widths...){ 
  @return nth($widths, $index); 
}
.col-3 { 
  width: column-width(3, 25%, 50%, 75%, 100%); 
}

rest引數的形式是引數名稱後面跟三個點。

上面程式碼中，3會傳遞給$index，後面的剩餘引數會都傳遞給$widths（$widths生成一個list列表）。

nth()是一個內建函式，可以從列表中找到對應索引的值（索引是從1開始的，與大多數程式語言從0開始不同）。

上面程式碼編譯結果如下:

[CSS] 純文字檢視 複製程式碼
.col-3 {
  width: 75%;
}