简介
SASS（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，可以让我们写出更加简洁、灵活、可维护性高的样式表。SASS 提供了很多有用的功能，如变量、嵌套、混合、函数等，其中函数是 SASS 中非常强大的一个功能，可以大大提高我们的开发效率。本文将介绍 SASS 中常用的函数，并带有详细的实例演示，希望对大家的学习和实践有所帮助。
变量函数
SASS 中提供了很多关于变量的函数，这里介绍两种常用的：
1. var() 函数
var() 函数可以让我们使用变量的值作为属性值，例如：
$color: red;
.text {
color: var($color);
}上面的代码中，我们定义了一个名为 $color 的变量，然后在 .text 类选择器中使用了 var() 函数，将 $color 变量的值赋给了 color 属性。这可以避免出现繁琐的重复代码，提高了代码的可维护性。
2. map-get() 函数
map-get() 函数可以获取 Sass Map（类似于 JavaScript 中的对象）中指定属性的值，例如：
-- -------------------- ---- ------- -------- - -------- ---- ---------- ----- --------- ----- -- ----- - ------ ---------------- --------- -
上面的代码中，我们定义了一个名为 $colors 的 Map 变量，包含了三个属性，分别是 primary、secondary 和 tertiary，对应的值分别为 red、blue 和 green。然后在 .text 类选择器中使用了 map-get() 函数，获取了 $colors 变量中的 primary 属性的值，并将其作为 color 属性的值。这样，我们可以更方便地使用 Map 变量中的属性值。
颜色函数
SASS 中提供了很多关于颜色的函数，这里介绍两种常用的：
1. lighten() 函数
lighten() 函数可以让我们将颜色变亮，例如：
$color: #000;
.text {
color: lighten($color, 20%);
}上面的代码中，我们定义了一个名为 $color 的变量，代表黑色。然后在 .text 类选择器中使用了 lighten() 函数，将 $color 变亮了 20%。这样，我们可以快速地对颜色进行调整，提高了代码的效率和灵活性。
2. mix() 函数
mix() 函数可以让我们混合两种颜色，例如：
$color1: #ff0000;
$color2: #00ff00;
.text {
color: mix($color1, $color2, 50%);
}上面的代码中，我们定义了两个名为 $color1 和 $color2 的变量，分别代表红色和绿色。然后在 .text 类选择器中使用了 mix() 函数，将 $color1 和 $color2 按照 50% 的比例混合在一起，得到了一个黄绿色。这样，我们可以方便地进行颜色的组合和混搭。
数字函数
SASS 中提供了很多关于数字的函数，这里介绍两种常用的：
1. percentage() 函数
percentage() 函数可以让我们将数字转换为百分数，例如：
$number: 0.5;
.text {
width: percentage($number);
}上面的代码中，我们定义了一个名为 $number 的变量，代表 0.5 这个小数。然后在 .text 类选择器中使用了 percentage() 函数，将 $number 转换为了 50%。这样，我们可以在需要使用百分数的场景中方便地使用数字。
2. abs() 函数
abs() 函数可以让我们取数字的绝对值，例如：
$number: -10;
.text {
margin-left: abs($number) * 10px;
}上面的代码中，我们定义了一个名为 $number 的变量，代表 -10 这个负数。然后在 .text 类选择器中使用了 abs() 函数，取 $number 的绝对值，并将其与 10px 相乘，赋给了 margin-left 属性。这样，我们可以方便地进行数字的操作和计算。
字符串函数
SASS 中提供了很多关于字符串的函数，这里介绍两种常用的：
1. unquote() 函数
unquote() 函数可以让我们去掉字符串中的引号，例如：
$text: "Hello, World!";
.text:before {
content: unquote($text);
}上面的代码中，我们定义了一个名为 $text 的变量，代表字符串 "Hello, World!"。然后在 .text:before 类选择器中使用了 unquote() 函数，去掉了 $text 变量中的引号，并将其作为 content 属性的取值。这样，我们可以更加灵活地控制字符串的输出。
2. str-index() 函数
str-index() 函数可以让我们查找字符串中某个子串的位置，例如：
$text: "Hello, World!";
.text:before {
content: str-index($text, "o");
}上面的代码中，我们定义了一个名为 $text 的变量，代表字符串 "Hello, World!"。然后在 .text:before 类选择器中使用了 str-index() 函数，查找了 $text 变量中字符 "o" 第一次出现的位置，并将其作为 content 属性的取值。这样，我们可以更加方便地对字符串进行操作和处理。
总结
本文介绍了 SASS 中常用的函数及实例演示，这些函数包括了变量函数、颜色函数、数字函数和字符串函数，应用广泛，非常实用。希望通过本文的学习和实践，大家可以更加熟练地使用 SASS，写出更加高效、简洁、优美的样式表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b01f2968c7c53b0d5ceb1