@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 变得容易，这些 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() 函数 获取参数列表并返回传递给函数的任何额外关键字，作为从参数名称（不包括 $）到这些参数值的映射。

传递任意参数传递任意参数永久链接

就像参数列表允许函数获取任意位置或关键字参数一样，相同的语法也可用于传递位置和关键字参数给函数。如果您将列表后跟 ... 作为函数调用的最后一个参数传递，则其元素将被视为其他位置参数。类似地，后跟 ... 的映射将被视为其他关键字参数。您甚至可以同时传递两者！

• 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-规则指示用作调用函数的结果的值。它仅允许在 @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)