@function

函数允许您在 SassScript 值上定义复杂的操作，您可以在整个样式表中重用这些值。它们便于以可读的方式抽象出常见的公式和行为。

函数是使用@function规则定义的，该规则编写为@function(){...}。函数的名称可以是任何 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;
}

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

参数

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

可选参数

通常，函数声明的每个参数都必须在包含该函数时传递。但是，您可以通过定义一个默认值来使参数成为可选参数，如果该参数未传递，则将使用该默认值。默认值使用与变量声明相同的语法：变量名，后跟一个冒号和一个 SassScript 表达式。这使得定义灵活的函数 API 变得容易，这些 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%);
}

.header {
  background-color: #523314;
}

关键字参数

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

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

.micro {
  width: 180px;
}

接收任意关键字参数

参数列表也可用于获取任意关键字参数。该meta.keywords()函数接受一个参数列表并返回任何额外的关键字，这些关键字作为从参数名称（不包括$）到这些参数值的映射传递给函数。

传递任意参数

就像参数列表允许函数接受任意位置或关键字参数一样，可以使用相同的语法将位置参数和关键字参数传递给函数。如果你传递一个列表...作为函数调用的最后一个参数，它的元素将被视为额外的位置参数。同样，后跟的映射...将被视为附加关键字参数。你甚至可以同时通过！

$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...);
}

@return

@retur规则指示用作调用函数结果的值。它只允许在@function正文中，并且每个都@function必须以@retur。

当@retur遇到时，它立即结束函数并返回其结果。提前返回对于处理边缘情况，或在不将整个函数包装到@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 {
    @retur $insert;
  }

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

其他功能

除了用户定义的函数外，Sass 还提供了大量的内置函数核心库，这些函数始终可供使用。Sass 实现还可以在宿主语言中定义自定义函数。当然，您总是可以调用普通的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)

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com