@function

使用定义@function为的规则定义功能@function <name>(<arguments...>) { ... }。函数名称可以是任何Sass标识符。它只能包含通用语句，以及表示要用作函数调用结果的值@return的规则。使用常规CSS函数语法调用函数。

@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;
}

@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

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

参数永久链接参数

通过参数，可以在每次调用函数时自定义函数的行为。参数是在@function规则中函数名称之后指定的，并用括号括起来的变量名称列表。必须使用SassScript表达式形式的相同数量的参数调用该函数。这些表达式的值可以在函数体内作为相应变量使用。

可选参数永久链接可选参数

通常，包含函数时必须传递函数声明的每个参数。但是，您可以通过定义默认值来使参数成为可选参数，如果未传递该参数，则将使用该默认值。缺省值使用与变量声明相同的语法：变量名，后跟冒号和SassScript表达式。这样可以轻松定义可以以简单或复杂方式使用的灵活功能API。

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

@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%)

.header {
  background-color: #523314;
}

关键字参数永久链接关键字参数

调用函数时，除了按参数在参数列表中的位置传递参数外，还可以按名称传递参数。这对于具有多个可选参数或布尔  参数的函数特别有用，而布尔参数的含义在没有名称时不明显。关键字参数与变量声明和可选参数使用相同的语法。

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

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

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

接受任意论点永久链接接受任意论点

有时，函数可以接受任意数量的参数很有用。如果@function声明中的最后一个参数以结尾...，则该函数的所有其他参数将作为列表传递给该参数。此参数称为参数列表。

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

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

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

  @return $sum


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

.micro {
  width: 180px;
}

接受任意关键字参数永久链接接受任意关键字参数

参数列表也可以用于接受任意关键字参数。该meta.keywords()函数接受一个参数列表，并返回从参数名称（不包括）到这些参数值的映射形式传递给该函数的所有其他关键字$。

传递任意论点永久链接传递任意论点

就像参数列表允许函数采用任意的位置或关键字参数一样，可以使用相同的语法将位置和关键字参数传递给函数。如果传递的列表后面...是函数调用的最后一个参数，则其元素将被视为其他位置参数。同样，后面跟随的映射...将被视为其他关键字参数。您甚至可以一次通过两个！

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

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

.micro {
  width: 30px;
}

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

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

@return永久链接@return

该@return规则指示要用作调用函数结果的值。只能在@function主体内使用，每个主体都@function 必须以结尾  @return。

@return遇到a 时，它将立即结束该函数并返回其结果。提早返回对于处理边缘情况或可用更有效算法而不将整个函数包装在一个@else块中的情况很有用。

@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;
}

@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功能，而无需每次添加新版本时都发布新版本。

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

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

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

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