SASS 是一种 CSS 预处理器，它提供了许多方便的功能来简化 CSS 的编写，其中最强大的功能之一就是函数。函数可以让我们在 SASS 中编写更加灵活和强大的代码。本文将详细介绍 SASS 函数的使用。
函数的定义
SASS 函数使用 @function 关键字定义，函数可以有多个参数，也可以没有参数。函数可以返回一个值，这个值可以是任何 SASS 数据类型，包括数字、字符串、颜色、列表等等。
下面是一个简单的例子：
@function add($a, $b) {
@return $a + $b;
}这个函数接受两个参数 $a 和 $b，并返回它们的和。我们可以在 SASS 中使用这个函数来计算两个数字的和：
$sum: add(2, 3); // $sum 的值为 5
函数的调用
在 SASS 中，函数的调用与 CSS 属性的赋值类似，使用 : 来分隔属性名和属性值。例如：
body {
background-color: lighten(#000000, 20%);
}这里调用了 lighten() 函数，将黑色的背景颜色变亮了 20%。
内置函数
SASS 提供了许多内置函数，可以在编写样式时大大提高效率。下面是一些常用的内置函数：
颜色函数
SASS 提供了许多内置函数来处理颜色，包括调整亮度、饱和度、透明度等等。下面是一些常用的颜色函数：
lighten($color, $amount)：增加颜色的亮度。darken($color, $amount)：降低颜色的亮度。saturate($color, $amount)：增加颜色的饱和度。desaturate($color, $amount)：降低颜色的饱和度。alpha($color)：获取颜色的透明度。rgba($color, $alpha)：设置颜色的透明度。
数字函数
SASS 还提供了一些内置函数来处理数字，包括四舍五入、向上取整、向下取整等等。下面是一些常用的数字函数：
round($number)：四舍五入。ceil($number)：向上取整。floor($number)：向下取整。
字符串函数
SASS 还提供了一些内置函数来处理字符串，包括字符串连接、字符串替换等等。下面是一些常用的字符串函数：
str-length($string)：获取字符串的长度。str-insert($string, $insert, $index)：在字符串的指定位置插入另一个字符串。str-index($string, $substring)：获取子字符串在字符串中的位置。str-replace($string, $search, $replace)：替换字符串中的子字符串。
自定义函数
除了内置函数，SASS 还允许我们自定义函数来满足特定的需求。下面是一个自定义函数的例子：
@function square($n) {
@return $n * $n;
}这个函数接受一个参数 $n，并返回其平方值。我们可以在样式中使用这个函数来计算任意数字的平方：
.square {
width: square(100px);
}这里使用 square() 函数计算了一个 100px 宽度的正方形的宽度。
结论
SASS 函数是一个非常有用的功能，可以帮助我们编写更加灵活和强大的样式。在编写 SASS 样式时，我们应该充分利用内置函数和自定义函数来提高效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67668ade76af2b9a20f88054