Sass 函數指令

1. 前言

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

2. 什么是 Sass 函數指令

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

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

回憶一下，上面的代碼在之前的章節中也出現過，這就是函數指令，定義好一個函數后我們就可以使用了，下面我們開始詳細講解函數指令。

3. 語法詳情

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

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

3.1 函數的參數

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

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

上面的代碼轉換為 CSS 如下：

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

要注意的是，為參數設置的默認值，也可以引用前面的參數或者是任何表達式。

3.2 接收任意數量的參數

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

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

上面這段代碼轉換為 CSS 如下：

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

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

3.3 @return

在前面的代碼中，可以看到很多次我們在函數指令中使用了 @return。@return 指令表示作為函數調用結果的值，說的簡單點就是這個函數的返回值，這和在 javascript 的函數中使用 return 很類似。

在 Sass 中 @return 指令只能在 @function 中使用，并且每個 @function 都必須以 @return 結尾！ 在 @function 的邏輯代碼中，如遇到 @return 會立即結束函數并返回其結果，這在一些 @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");
}

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

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

4. 實戰經驗

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

由于函數一般是和你的業務強相關的，一般就是為自己的項目定義一些工具和方法，這里我就不貼出代碼示例了。在實際的應用中，這個函數指令就是需要你“隨機應變”，按需封裝和使用！

5. 小結

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

除此之外 Sass 提供了大量的內置函數，這些我們在前面的章節 Sass 函數中都做了講解，你可以借用這些函數再配合你自己定義的函數指令，來實現各種復雜的邏輯和強大的效果。