函式 Functions

宣告函式可使用 @function 關鍵字，當產生結果時可使用 @return 將其返回給呼叫的對象。

此語法僅可回傳單一數值，也可搭配變數和 Mixin 使用。

例如:

／／ｓｃｓｓ／／
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

編｜ 以往參數都必須依照順序傳入以保證對象如預期被接收，在 SCSS 可以直接以關鍵字方式傳入參數值
譯｜ 即可。雖然說這樣的寫法方便了許多，但卻可能存在可讀性低落的問題，造成沒辦法立即得知參數
後｜ 是否已傳入，最後可能就會出現錯誤。
　Ｖ

／／ｃｓｓ／／
.sidebar {
  float: left;
  margin-left: 64px;
}

可選參數

透過定義一個默認值來使參數成為可選參數，默認值即為參數未傳遞時。

例如:

// scss //
@function invert($color, $amount: 100%) {
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
  background-color: invert($primary-color, 80%);
}

編｜
譯｜ 當應該被接收的變數就算無法傳遞還是可直接向預設參數取值，來避免處理時發生錯誤。
後｜
　Ｖ

// css // 
.header {
  background-color: #523314;
}

關鍵字參數

呼叫函式時，除了按參數列表中的位置傳遞參數外，還可以按名稱傳遞參數。

例如:

// scss //
$primary-color: #036;
.banner {
  background-color: $primary-color;
  color: scale-color($primary-color, $lightness: +40%);
}

編｜
譯｜ 因為任何參數都可以透過名稱傳遞，所以在重新命名函式的參數時要小心，千萬不可重複。
後｜
　Ｖ

// css //
.banner {
  background-color: #036;
  color: #0a85ff;
}

任意參數

將位置參數和關鍵字參數傳遞給函數

// scss //
$widths: 50px, 30px, 100px;
.micro {
  width: min($widths...);
}

編｜
譯｜
後｜
　Ｖ

// css //
.micro {
  width: 30px;
}