SASS 是众所周知的前端 CSS 预处理器，它的语法比原生 CSS 更加灵活和强大。其中，函数是 SASS 语言最常用的特性之一。函数可以帮助你减少 CSS 代码的重复，简化样式的管理和维护。本文将为大家详细介绍 SASS 的函数用法，希望能让你在 Sass 中游刃有余！
SASS 函数简介
SASS 的函数是编写 SASS 样式时，最常用到的工具之一。他可以让样式表写出更加工整和简洁的风格。SASS 函数可以接收参数，对参数进行操作并返回结果。
下面是一个简单的例子，在 Sass 中定义一个函数：
@function add($a, $b) {
@return $a + $b;
}上面的代码定义了一个名为 add 的函数，接收两个参数 $a 和 $b，并返回它们之和。
SASS 函数的分类
SASS 函数分为两类：内置函数和自定义函数。内置函数在 SASS 中自带，供开发者直接使用。而自定义函数则需要我们进行编写。
内置函数
SASS 内置函数提供了一些基本的 CSS 操作方法，最常用的有：
1. 字符串操作函数
unquote($string)：删除字符串的引号。quote($string)：为字符串添加引号。str-insert($string, $insert, $index)：在指定位置插入字符串。str-index($string, $substring)：找到子字符串第一次出现的位置。
2. 数值函数
percentage($value)：将数值转换为百分数。round($value)：四舍五入取整。ceil($value)：向上取整。floor($value)：向下取整。
3. 颜色函数
rgb($red, $green, $blue)：创建 RGB 颜色值。rgba($red, $green, $blue, $alpha)：创建 RGBA 颜色值。hue($color)：返回颜色的色相值。saturation($color)：返回颜色的饱和度值。lightness($color)：返回颜色的亮度值。
4. 列表函数
length($list)：返回列表长度。nth($list, $n)：返回列表的第 $n 个值。join($list1, $list2, $separator)：将两个列表合并为一个新列表。append($list1, $val, $separator)：在列表的末尾添加一个值。zip($lists...)：将多个列表合并为一个二维列表。
更多内置函数，请查阅 SASS 官方文档。
自定义函数
除了使用 SASS 内置函数外，我们还可以自己编写 SASS 函数。自己编写 SASS 函数，可以根据我们的需要定义各种操作方法，让样式表的管理和维护更加轻松。
下面是一个自定义函数的示例，我们在 Sass 中定义一个名为 avg 的函数，用于计算一组数字的平均值：
@function avg($list) {
$sum: 0;
$len: length($list);
@for $i from 1 through $len {
$sum: $sum + nth($list, $i);
}
@return $sum / $len;
}上面的代码中，我们使用了 @for 循环遍历了列表 $list 中的每一个值，并将它们的和记入变量 $sum。最后我们将 $sum 除以列表的长度 $len 并返回结果。这个 avg 函数可以帮助我们计算任何一组数字的平均值。
SASS 函数的语法
在 Sass 中使用函数的语法非常简单。在函数名后面添加 ()，括号中可以包含参数列表：
$var: add(1, 2); // $var = 3
上述例子中，我们调用了 add 函数，并将参数 1 和 2 传递给它。返回的结果被赋值给了变量 $var。
对于自定义函数，在调用时需要指定参数的名称：
$var: avg($list: 1, 2, 3, 4, 5); // $var = 3
在调用 avg 函数时，我们使用了 $list: 1, 2, 3, 4, 5 的语法来指定参数 $list。这个语法可以让调用函数的代码更加易读和易于理解。
SASS 函数的应用实例
SASS 函数的应用非常广泛。在这里，我们会给大家展示两个常见的应用实例。
实例一：生成渐变颜色
使用 SASS 函数可以帮助我们实现一些 CSS 难以实现的样式效果，比如渐变颜色。下面的代码演示了如何使用 SASS 的 linear-gradient 函数生成渐变颜色：
.gradient {
background: linear-gradient(#f99 30%, #f00);
border: 1px solid darken(#f00, 10%);
}上述代码中，我们使用了 SASS 内置函数 darken 来生成比原来的颜色更深的颜色。
实例二：实现响应式布局
SASS 函数还可以帮助我们实现响应式布局。下面的代码演示了如何使用 SASS 的自定义函数来实现响应式布局：
-- -------------------- ---- -------
------ ------------------- -
------ ------ --- ----------- ------ -
------ -----
-
------ ------ --- ----------- ------ --- ----------- ------ -
------ --------- - -------------
-
------ ------ --- ----------- ------ -
------ --------- - -------------
---------- -------
-
-上述代码中，我们定义了一个名为 col-width 的 mixin。他根据屏幕的宽度动态调整元素的宽度。在 max-width: 640px 时，元素的宽度为 100%，在 max-width: 960px 时，元素的宽度为 100% / $columns，在 min-width: 961px 时，元素的宽度为 100% / $columns，并限制最大宽度为 1200px。我们可以在需要使用这个 mixin 的元素上调用它，比如：
.col {
@include col-width(4);
}上述代码将 .col 的宽度设为父元素宽度的 1/4（除非宽度小于 641px，此时为 100%）。
SASS 函数的总结
本文详细介绍了 SASS 函数的基本用法和常见应用场景。在使用 SASS 函数时，我们应该灵活运用内置函数和自定义函数，以达到简化样式表管理和维护的目的。希望本文对大家对 SASS 函数的理解有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64633bdb968c7c53b043f40d