自学教程函数允许您定义对 SassScript 值的复杂操作，您可以在整个样式表中重复使用这些操作。它们可以轻松地以可读的方式抽象出常见的公式和行为。
函数是使用@function规则定义的，该规则写@function <name>(<arguments...>) { ... }.@return at-rule。函数使用正常的 CSS 函数语法调用。
SCSS
@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;
}编译为 CSS 结果：
CSS
.sidebar {
float: left;
margin-left: 64px;
}像所有Sass标识符一样，函数名称将连字符和下划线视为相同。
参数
必须使用SassScript表达式形式的相同数量的参数调用该函数。这些表达式的值可以在函数体内作为相应变量使用。
可选参数
定义默认值来使参数成为可选参数。
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 结果：
CSS
.header {
background-color: #523314;
}默认值可以是任何 SassScript 表达式，甚至可以引用前面的参数！
关键字参数
调用函数，除了按参数列表中的位置传递参数外，还可以按名称传递参数。这对于具有多个可选参数的函数参数特别有用，而对于布尔参数，如果没有名称，其含义并不明显。关键字参数使用与变量声明和可选参数相同的语法。
SCSS
$primary-color: #036;
.banner {
background-color: $primary-color;
color: scale-color($primary-color, $lightness: +40%);
}编译为 CSS 结果：
CSS
.banner {
background-color: #036;
color: #0a85ff;
}任意参数
有时，能够接受任意数量的参数是很有用的。如果函数声明中的最后一个参数以 …“ 结尾，则该函数的所有额外参数都将作为列表（List）传递给该参数。此参数称为参数列表。
SCSS
@function sum($numbers...) {
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}
.micro {
width: sum(50px, 30px, 100px);
}编译为 CSS 结果：
CSS
.micro {
width: 180px;
}任意关键字参数
参数列表也可用于获取任意关键字参数。meta.keywords() 函数接受一个参数列表，并返回传递给 mixin 的参数映射（Map）。
传递任意参数
就像参数列表允许函数采用任意位置或关键字参数一样，相同的语法可用于将位置和关键字参数传递给函数。如果您传递一个列表（List），最后跟…，其元素将被视为附加位置参数。同样，映射（Map）后跟…将被视为附加关键字参数。两者可以同时使用！
SCSS
$widths: 50px, 30px, 100px;
.micro {
width: min($widths...);
}编译为 CSS 结果：
实例
.micro {
width: 30px;
}@return
规则@return指示要用作调用函数的结果的值。它只允许在@function体内使用，并且每个@function都必须以@return结尾。
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 还提供了大量内置函数的核心库，这些函数始终可供使用。Sass 实现还可以在主语言中定义自定义函数。当然，你总是可以调用普通的CSS函数（即使是语法奇怪的函数）。
纯 CSS 函数
既不是用户定义的也不是内置函数的任何函数调用，都将编译为普通的CSS函数（除非使用Sass参数语法）。参数将编译为 CSS，并按原样包含在函数调用中。这样可以确保Sass支持所有 CSS功能，而无需每次添加新版本时都发布新版本。
SCSS
@debug var(--main-bg-color); // var(--main-bg-color)
$primary: #f2ece4;
$accent: #e1d7d2;
@debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)一些CSS函数，例如calc()和element()具有不寻常的语法。Sass 特别将这些函数解析为未加引号的字符串。
分享笔记