Sass 函數(shù)指令

1. 前言

在之前的章節(jié)我們學(xué)習(xí)過 Sass 提供的各種各樣的函數(shù)，那么如果我們需要自定定義函數(shù)來使用就需要用到函數(shù)指令 @function了。本節(jié)內(nèi)容我們來學(xué)習(xí) Sass 函數(shù)指令的語法和使用，在 Sass 中自定義函數(shù)是必須要掌握的！

2. 什么是 Sass 函數(shù)指令

函數(shù)指令也叫自定義函數(shù)讓你可以容易的處理各種邏輯和定義復(fù)雜的操作，而且你可以在任何需要的地方復(fù)用函數(shù)，這使得我們可以抽離出來一些常見的公式或者邏輯，我們先來看下它長什么樣，代碼如下：

// 定義函數(shù)
@function a() {
  @return "a"
}
// 使用函數(shù)
.p {
  font: a();
}

回憶一下，上面的代碼在之前的章節(jié)中也出現(xiàn)過，這就是函數(shù)指令，定義好一個(gè)函數(shù)后我們就可以使用了，下面我們開始詳細(xì)講解函數(shù)指令。

3. 語法詳情

函數(shù)指令是通過 @function 來定義，它的寫法是 @function name（arguments…）{}，@function 后面跟函數(shù)名，然后是一個(gè) () ，() 里面是這個(gè)函數(shù)接收的參數(shù)，可以接收也可以不接收，最后是 {} 中放的是你的邏輯代碼。函數(shù)名將連字符和下劃線視為相同，也就是說 a_b 和 a-b 是同一個(gè)函數(shù)。我們舉例看下：

@function fun-name() {
  	// 在這里編寫邏輯代碼
}

3.1 函數(shù)的參數(shù)

函數(shù)指令的參數(shù)和之前我們講的混合指令的參數(shù)很像，函數(shù)如果接收參數(shù)那么使用的時(shí)候就必須傳入這些參數(shù)，但是你可以定義默認(rèn)值使參數(shù)成為可選的，我們舉例來看下：

// 有默認(rèn)值的參數(shù)
@function a($arg: 1) {
  @return $arg;
}
// 無默認(rèn)值的參數(shù)
@function b($arg) {
  @return $arg;
}
.p {
  font: a();
  font: b(4);
}

上面的代碼轉(zhuǎn)換為 CSS 如下：

.p {
  font: 1;
  font: 4;
}

要注意的是，為參數(shù)設(shè)置的默認(rèn)值，也可以引用前面的參數(shù)或者是任何表達(dá)式。

3.2 接收任意數(shù)量的參數(shù)

和前面章節(jié)講的 @mixin 類似，函數(shù)指令也可以接收任意數(shù)量的參數(shù)，同樣是將最后一個(gè)參數(shù)以 … 結(jié)尾，我們來舉例看下：

@function fonts($familys...) {
  @return  $familys;
}
.p {
  font: fonts("one", "two", "three")
}

上面這段代碼轉(zhuǎn)換為 CSS 如下：

.p {
  font: "one", "two", "three";
}

同樣的函數(shù)的參數(shù)也可以接收任意的參數(shù)列表，就像之前在混合指令章節(jié)講的一樣，可以用過 meta.keywords() 來獲取和使用這些參數(shù)，不過這個(gè)我們一般不是很常用。

3.3 @return

在前面的代碼中，可以看到很多次我們?cè)诤瘮?shù)指令中使用了 @return。@return 指令表示作為函數(shù)調(diào)用結(jié)果的值，說的簡(jiǎn)單點(diǎn)就是這個(gè)函數(shù)的返回值，這和在 javascript 的函數(shù)中使用 return 很類似。

在 Sass 中 @return 指令只能在 @function 中使用，并且每個(gè) @function 都必須以 @return 結(jié)尾！ 在 @function 的邏輯代碼中，如遇到 @return 會(huì)立即結(jié)束函數(shù)并返回其結(jié)果，這在一些 @if 判斷的情況下很有用。我們舉例看下：

@function a($str: "a") {
  @if $str == "a" {
    @return 10px;
  } @else if $str == "b" {
    @return 20px;
  } @else if $str == "c" {
    @return 30px;
  } @else {
    @return 40px;
  }
}

p {
  padding: a();
  width: a("f");
  height: a("c");
  margin: a("b");
}

從上面的代碼中我們可以可看到，在函數(shù) a 中，我們根據(jù)不同的參數(shù)返回不同的結(jié)果，然后在 p 的樣式中通過傳入不同的參數(shù)來獲取不同的結(jié)果。上面這段代碼會(huì)轉(zhuǎn)換為如下的 CSS 代碼：

p {
  padding: 10px;
  width: 40px;
  height: 30px;
  margin: 20px;
}

4. 實(shí)戰(zhàn)經(jīng)驗(yàn)

在實(shí)際的項(xiàng)目中使用函數(shù)指令是必不可少的，我們會(huì)定義很多函數(shù)來幫助我們解決邏輯問題，一般我們會(huì)獨(dú)立抽出來一個(gè) function.scss 文件來管理整個(gè)項(xiàng)目中的函數(shù)指令，一般這些函數(shù)都是根據(jù)你的項(xiàng)目特性以及樣式需要封裝出來的。

由于函數(shù)一般是和你的業(yè)務(wù)強(qiáng)相關(guān)的，一般就是為自己的項(xiàng)目定義一些工具和方法，這里我就不貼出代碼示例了。在實(shí)際的應(yīng)用中，這個(gè)函數(shù)指令就是需要你“隨機(jī)應(yīng)變”，按需封裝和使用！

5. 小結(jié)

本節(jié)內(nèi)容我們講了 Sass 函數(shù)指令 @function ，還有函數(shù)指令的用法和參數(shù)。我們可以使用函數(shù)來編寫各種各樣我們自己的函數(shù)。函數(shù)指令和前面的混合指令很類似，我們通過下圖來回一下函數(shù)指令的用法：

除此之外 Sass 提供了大量的內(nèi)置函數(shù)，這些我們?cè)谇懊娴恼鹿?jié) Sass 函數(shù)中都做了講解，你可以借用這些函數(shù)再配合你自己定義的函數(shù)指令，來實(shí)現(xiàn)各種復(fù)雜的邏輯和強(qiáng)大的效果。