@function

函式是使用 @function at 規則定義的，寫作方式為 @function <name>(<arguments...>) { ... }。函式的名稱可以是任何不以 -- 開頭的 Sass 識別符號。它只能包含 通用語句，以及 @return at 規則，該規則指示要用作函式呼叫結果的值。函式使用正常的 CSS 函式語法呼叫。

• SCSS
• Sass
• CSS

程式碼遊樂場

SCSS 語法

@function fibonacci($n) {
  $sequence: 0 1;
  @for $_ from 1 through $n {
    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1);
    $sequence: append($sequence, $new);
  }
  @return nth($sequence, length($sequence));
}

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

程式碼遊樂場

Sass 語法

@function fibonacci($n)
  $sequence: 0 1
  @for $_ from 1 through $n
    $new: nth($sequence, length($sequence)) + nth($sequence, length($sequence) - 1)
    $sequence: append($sequence, $new)
  @return nth($sequence, length($sequence))

.sidebar
  float: left
  margin-left: fibonacci(4) * 1px

CSS 輸出

.sidebar {
  float: left;
  margin-left: 5px;
}

參數參數永久連結

參數允許在每次呼叫函式時自訂函式的行為。參數在 @function 規則中函式名稱之後指定，以括號括住的變數名稱列表形式呈現。呼叫函式時必須使用相同數量的參數，以SassScript 運算式的形式呈現。這些運算式的值在函式主體內作為對應的變數提供。

選用參數選用參數永久連結

通常，函式宣告的每個參數都必須在引入該函式時傳遞。但是，您可以透過定義一個*預設值*，使參數成為選用的，如果未傳遞該參數，則會使用該預設值。預設值使用與變數宣告相同的語法：變數名稱，後跟冒號和SassScript 運算式。這可以輕鬆定義彈性的函式 API，可以用於簡單或複雜的方式。

• SCSS
• Sass
• CSS

程式碼遊樂場

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%);
}

程式碼遊樂場

Sass 語法

@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: rgb(81.6, 51, 20.4);
}

關鍵字參數關鍵字參數永久連結

呼叫函式時，除了透過參數在參數列表中的位置傳遞之外，還可以透過名稱傳遞參數。這對於具有多個選用參數的函式，或對於沒有名稱就無法清楚了解其含義的布林值參數特別有用。關鍵字參數使用與變數宣告和選用參數相同的語法。

• SCSS
• Sass
• CSS

程式碼遊樂場

SCSS 語法

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

程式碼遊樂場

Sass 語法

$primary-color: #036
.banner
  background-color: $primary-color
  color: scale-color($primary-color, $lightness: +40%)

CSS 輸出

.banner {
  background-color: #036;
  color: rgb(10.2, 132.6, 255);
}

接受任意數量參數接受任意數量參數永久連結

有時，函式能夠接受任意數量的參數會很有用。如果 @function 宣告中的最後一個參數以 ... 結尾，則該函式的所有額外參數都會以列表的形式傳遞給該參數。這個參數稱為參數列表。

• SCSS
• Sass
• CSS

程式碼遊樂場

SCSS 語法

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

程式碼遊樂場

Sass 語法

@function sum($numbers...)
  $sum: 0
  @each $number in $numbers
    $sum: $sum + $number

  @return $sum


.micro
  width: sum(50px, 30px, 100px)

CSS 輸出

.micro {
  width: 180px;
}

接受任意關鍵字參數接受任意關鍵字參數永久連結

參數列表也可用於接收任意關鍵字參數。meta.keywords() 函式 接收一個參數列表，並將傳遞給函式的任何額外關鍵字作為一個從參數名稱（不包含 $）到這些參數值的映射返回。

傳遞任意參數傳遞任意參數 永久連結

就像參數列表允許函式接收任意位置或關鍵字參數一樣，相同的語法也可用於將位置和關鍵字參數*傳遞*給函式。如果您在函式呼叫的最後一個參數傳遞一個列表後跟 ...，則其元素將被視為額外的 positional 參數。同樣地，後跟 ... 的映射將被視為額外的關鍵字參數。您甚至可以同時傳遞兩者！

• SCSS
• Sass
• CSS

程式碼遊樂場

SCSS 語法

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

程式碼遊樂場

Sass 語法

$widths: 50px, 30px, 100px
.micro
  width: min($widths...)

CSS 輸出

.micro {
  width: 30px;
}

💡 小知識

因為參數列表會同時追蹤位置和關鍵字參數，所以您可以使用它一次將兩者都傳遞給另一個函式。這使得定義函式的別名變得超級簡單！

• SCSS
• Sass

程式碼遊樂場

SCSS 語法

@function fg($args...) {
  @warn "The fg() function is deprecated. Call foreground() instead.";
  @return foreground($args...);
}

程式碼遊樂場

Sass 語法

@function fg($args...)
  @warn "The fg() function is deprecated. Call foreground() instead."
  @return foreground($args...)

@return@return 永久連結

@return at-rule 指示用作呼叫函式結果的值。它只允許在 @function 主體內使用，並且每個 @function 必須以 @return 結束。

當遇到 @return 時，它會立即結束函式並返回其結果。提前返回對於處理邊緣情況或可以使用更有效率的演算法而無需將整個函式包裝在 @else 區塊 中的情況非常有用。

• SCSS
• Sass

程式碼遊樂場

SCSS 語法

@use "sass:string";

@function str-insert($string, $insert, $index) {
  // Avoid making new strings if we don't need to.
  @if string.length($string) == 0 {
    @return $insert;
  }

  $before: string.slice($string, 0, $index);
  $after: string.slice($string, $index);
  @return $before + $insert + $after;
}

程式碼遊樂場

Sass 語法

@use "sass:string"

@function str-insert($string, $insert, $index)
  // Avoid making new strings if we don't need to.
  @if string.length($string) == 0
    @return $insert


  $before: string.slice($string, 0, $index)
  $after: string.slice($string, $index)
  @return $before + $insert + $after

其他函式其他函式 永久連結

除了使用者定義的函式之外，Sass 還提供了一個包含可隨時使用的內建函式的豐富核心函式庫。Sass 的實作也允許在主機語言中定義自訂函式。當然，您也可以隨時呼叫一般的 CSS 函式（即使是具有特殊語法的函式）。

一般的 CSS 函式一般的 CSS 函式 永久連結

任何不是使用者定義或內建函式的函式呼叫都會被編譯成一般的 CSS 函式（除非它使用Sass 參數語法）。參數將被編譯成 CSS 並按原樣包含在函式呼叫中。這確保了 Sass 支援所有 CSS 函式，而無需在每次新增新函式時都發佈新版本。

• SCSS
• Sass

程式碼遊樂場

SCSS 語法

@debug var(--main-bg-color); // var(--main-bg-color)

$primary: #f2ece4;
$accent: #e1d7d2;
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)

程式碼遊樂場

Sass 語法

@debug var(--main-bg-color)  // var(--main-bg-color)

$primary: #f2ece4
$accent: #e1d7d2
@debug radial-gradient($primary, $accent)  // radial-gradient(#f2ece4, #e1d7d2)