考慮到sass自定義函數(shù)用到地方比較多揭措，并且后續(xù)需要單獨(dú)拿出來和Mixin胆数、extend進(jìn)行比較市埋，所以將原本屬于上一篇《Sass函數(shù)功能匯總》的這部分知識(shí)黎泣，在這里另開篇幅了。
【Sass函數(shù)功能匯總】：http://www.reibang.com/p/ef2ca6fbf944
1. 創(chuàng)建和使用自定義函數(shù)
Sass和其他腳本語(yǔ)言有類似之處缤谎，可以利用變量來構(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ù)需要兩個(gè)Sass指令坷澡， @function和 @return托呕。前者創(chuàng)建函數(shù)，后者表明了函數(shù)將返回的值
- function-name代表函數(shù)名频敛，在Sass中function-name和 function_name是相同的函數(shù)项郊，所以可使用破折號(hào)或下劃線調(diào)用函數(shù)，無論命名時(shí)使用的是哪個(gè)斟赚。
- 傳遞到函數(shù)中的參數(shù)$args是可選的着降，通常會(huì)使用傳遞過去的參數(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í)候會(huì)不知道每個(gè)參數(shù)是什么意思任洞，參數(shù)之間是一個(gè)什么樣的順序蓄喇。為了解決這個(gè)問題，Sass允許通過語(yǔ)法$name: value的形式指定每個(gè)參數(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ù)指定一個(gè)默認(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%; }
