SASS 中常用的内置函数及用法总结

SASS 是一种 CSS 预处理器，它提供了许多有用的功能，例如变量、嵌套、混合、继承等。除了这些基本功能之外，SASS 还提供了许多内置函数，可以帮助我们更方便地编写样式。本文将介绍 SASS 中常用的内置函数及其用法，并提供相应的示例代码。

1. 字符串函数

1.1 unquote()

unquote() 函数可以将一个带引号的字符串去掉引号，返回一个不带引号的字符串。例如：

$font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
body {
  font-family: unquote($font-family);
}

编译后的 CSS 代码如下：

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

1.2 quote()

quote() 函数可以给一个字符串加上引号，返回一个带引号的字符串。例如：

$color: #f00;
a {
  color: quote($color);
}

编译后的 CSS 代码如下：

a {
  color: "#f00";
}

1.3 str-insert()

str-insert() 函数可以在一个字符串的指定位置插入另一个字符串，返回一个新的字符串。例如：

$font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
body {
  font-family: str-insert($font-family, "Bold ", 14);
}

编译后的 CSS 代码如下：

body {
  font-family: "Helvetica Neue Bold", Helvetica, Arial, sans-serif;
}

2. 数字函数

2.1 abs()

abs() 函数可以返回一个数的绝对值。例如：

$number: -10;
div {
  width: abs($number) + 100px;
}

编译后的 CSS 代码如下：

div {
  width: 110px;
}

2.2 ceil()

ceil() 函数可以向上取整，返回一个大于或等于指定数的最小整数。例如：

$number: 3.4;
div {
  width: ceil($number) + 100px;
}

编译后的 CSS 代码如下：

div {
  width: 104px;
}

2.3 floor()

floor() 函数可以向下取整，返回一个小于或等于指定数的最大整数。例如：

$number: 3.4;
div {
  width: floor($number) + 100px;
}

编译后的 CSS 代码如下：

div {
  width: 103px;
}

2.4 percentage()

percentage() 函数可以将一个小数转换为百分数。例如：

$number: 0.5;
div {
  width: percentage($number);
}

编译后的 CSS 代码如下：

div {
  width: 50%;
}

2.5 round()

round() 函数可以四舍五入，返回一个最接近指定数的整数。例如：

$number: 3.4;
div {
  width: round($number) + 100px;
}

编译后的 CSS 代码如下：

div {
  width: 103px;
}

3. 颜色函数

3.1 lighten()

lighten() 函数可以使一个颜色变亮，返回一个新的颜色。例如：

$color: #f00;
div {
  background-color: lighten($color, 20%);
}

编译后的 CSS 代码如下：

div {
  background-color: #ff6666;
}

3.2 darken()

darken() 函数可以使一个颜色变暗，返回一个新的颜色。例如：

$color: #f00;
div {
  background-color: darken($color, 20%);
}

编译后的 CSS 代码如下：

div {
  background-color: #990000;
}

3.3 saturate()

saturate() 函数可以使一个颜色饱和度增加，返回一个新的颜色。例如：

$color: #f00;
div {
  background-color: saturate($color, 50%);
}

编译后的 CSS 代码如下：

div {
  background-color: #ff0000;
}

3.4 desaturate()

desaturate() 函数可以使一个颜色饱和度减少，返回一个新的颜色。例如：

$color: #f00;
div {
  background-color: desaturate($color, 50%);
}

编译后的 CSS 代码如下：

div {
  background-color: #808080;
}

3.5 mix()

mix() 函数可以将两个颜色混合在一起，返回一个新的颜色。例如：

$color1: #f00;
$color2: #00f;
div {
  background-color: mix($color1, $color2, 50%);
}

编译后的 CSS 代码如下：

div {
  background-color: #7f007f;
}

4. 列表函数

4.1 nth()

nth() 函数可以返回列表中指定位置的值。例如：

$list: 1px 2px 3px;
div {
  width: nth($list, 2);
}

编译后的 CSS 代码如下：

div {
  width: 2px;
}

4.2 join()

join() 函数可以将两个列表合并成一个新的列表。例如：

$list1: 1px 2px 3px;
$list2: 4px 5px 6px;
div {
  width: join($list1, $list2);
}

编译后的 CSS 代码如下：

div {
  width: 1px 2px 3px 4px 5px 6px;
}

4.3 append()

append() 函数可以将一个值添加到列表的末尾，返回一个新的列表。例如：

$list: 1px 2px 3px;
div {
  width: append($list, 4px);
}

编译后的 CSS 代码如下：

div {
  width: 1px 2px 3px 4px;
}

5. 数组函数

5.1 length()

length() 函数可以返回数组的长度。例如：

$array: (1, 2, 3);
div {
  width: length($array);
}

编译后的 CSS 代码如下：

div {
  width: 3;
}

5.2 index()

index() 函数可以返回数组中指定值的位置。例如：

$array: (1, 2, 3);
div {
  width: index($array, 2);
}

编译后的 CSS 代码如下：

div {
  width: 2;
}

5.3 nth()

nth() 函数可以返回数组中指定位置的值。例如：

$array: (1, 2, 3);
div {
  width: nth($array, 2);
}

编译后的 CSS 代码如下：

div {
  width: 2;
}

5.4 join()

join() 函数可以将两个数组合并成一个新的数组。例如：

$array1: (1, 2, 3);
$array2: (4, 5, 6);
div {
  width: join($array1, $array2);
}

编译后的 CSS 代码如下：

div {
  width: 1, 2, 3, 4, 5, 6;
}

5.5 append()

append() 函数可以将一个值添加到数组的末尾，返回一个新的数组。例如：

$array: (1, 2, 3);
div {
  width: append($array, 4);
}

编译后的 CSS 代码如下：

div {
  width: 1, 2, 3, 4;
}

6. 总结

本文介绍了 SASS 中常用的内置函数，包括字符串函数、数字函数、颜色函数、列表函数和数组函数。这些函数可以极大地提高我们编写样式的效率和灵活性。熟练掌握这些函数的用法，可以让我们更加轻松地处理各种样式需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fa7d21d10417a22265abcf