SASS-SCSS常用内置函数使用指南

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

SASS/SCSS拥有自己的内置函数，和CSS函数不同，SASS/SCSS函数可使用变量，这意味着可以不必指明参数的顺序来声明函数。参数的语法是$name: value。

SASS/SCSS内置函数大体可分为数值函数、颜色函数、列表函数，本篇我们逐一介绍它们的语义与用法。

1 数值函数

数值函数中有三个是将结果转化为整数，不同于其他编程语言，Sass中将两个数相除时的结果通常是一个小数而不是一个整数，那么我们需要得到整数的时候就需要使用ceil($number\left)\text{向上取整数，}floor\right($number)向上取整数，floor(number)向下取整数，round($number)四舍五入取整数。

abs($number\left)\text{，用来返回一个数字的绝对值。}percentage\right($number)，用来返回一个数字的绝对值。percentage(number)接收一个小数（例如0.3，0.44，2.3），返回其百分数（30%，44%，2.3变为230%）。

comparable($number1,$number1,number2)返回这两个数字能否相加和比较。例如，comparable(12in, 7cm)返回true，因为两者的单位可以相互转换；但是comparable(10px, 10%)将返回false，因为像素和百分率不是一个度量标准。

unit($number\left)\text{将一个数值的单位作为一个字符串返回，当一个混合器的参数单位发生错误需要输出错误信息时，这相当有用。如果数值没有单位，则}unitless\right($number)将一个数值的单位作为一个字符串返回，当一个混合器的参数单位发生错误需要输出错误信息时，这相当有用。如果数值没有单位，则unitless(number)返回true，否则返回false。

总体来说，SASS/SCSS的数值函数处理的都是较普通的数学操作，而SASS/SCSS颜色函数则更加丰富一些。

2 颜色函数

一般来讲，所有的颜色以RBG和HSL值来表示，颜色函数中的信息函数可以让你直接获取这些单独的值：红、蓝、绿、色度、饱和度和亮度，以及alpha通道。信息函数以颜色值组成部分来命名：red($color\left)\text{、}blue\right($color)、blue(color)、green($color\left)\text{、}hue\right($color)、hue(color)、saturation($color\left)\text{、}lightness\right($color)、lightness(color)和alpha($color\left)\text{（另一种写法，}opacity\right($color)（另一种写法，opacity(color)）。这些函数都返回值同rgb()和hsl()函数的参数值：red()、blue()、green()返回0到255之间的整数，hue()返回一个0deg到359deg之间的数，saturation()和lightness()返回0%到100%之间的数，而alpha()返回一个0.0到1.0之间的数。

转换函数可以快速而简单地生成漂亮的颜色主题，最常用的两个函数是adjust($color\left)\text{和}scale\right($color)和scale(color)。这两个函数都接受一个颜色作为第一个参数，后面的参数是一列描述如何转换该颜色的关键字。adjust($color,...\left)\text{函数通过给定的数值，增加或减少一个或多个关键词的值。因此，}adjust\right($color,...)函数通过给定的数值，增加或减少一个或多个关键词的值。因此，adjust(color, $red:20,$red:20,alpha: -0.5)将$color\text{的红色增加}20\text{，将不透明度减少}0.5\text{。同样，}adjust($color的红色增加20，将不透明度减少0.5。同样，adjust(color, $lightness:15$lightness:15hue: 10deg)将亮度增加15%，并将色度增加10度。scale($color,...\left)\text{函数和}adjust\right(\left)\text{函数类似，但是它接受所有成分的百分率作为参，}scale\right(\left)\text{通过给定的百分数来设定这些关键词的值。因此，不管原来的亮度是多少，}scale\right($color,...)函数和adjust()函数类似，但是它接受所有成分的百分率作为参，scale()通过给定的百分数来设定这些关键词的值。因此，不管原来的亮度是多少，scale(color,$lightness:30$lightness:30color的亮度增加30%。如果初始的亮度数值较高，scale()比adjust()要更好：例如一个颜色已经有了80%的亮度，adjust()会使得该颜色变为纯白（亮度为100%），而scale()只会使亮度变为86%。

set($color\left)\text{函数与}adjust\right(\left)\text{和}scale\right(\left)\text{函数类似：它对颜色的每种成分都接受一个关键字。但是它的行为更加简单：它将这些关键词的值设定为一个新值，而不是对原有关键词的值进行修改。因此}set\right($color)函数与adjust()和scale()函数类似：它对颜色的每种成分都接受一个关键字。但是它的行为更加简单：它将这些关键词的值设定为一个新值，而不是对原有关键词的值进行修改。因此set(color, $red:100)\text{会将}$red:100)会将color的红色值设置为100，仅此而已。

mix($color1,$color1,color2, [$weight\left]\right)\text{函数通过计算各个成分的平均值来将两种颜色混合到一起。}$weight])函数通过计算各个成分的平均值来将两种颜色混合到一起。weight越接近100%，使用的$color1\text{越多；}$color1越多；weight越接0%，使用的$color2越多。

最后，我们还要提及一些非常方便的颜色函数。grayscale($scale)\text{将}$scale)将color的饱和度设置为0%，从而将颜色变为灰度。complement($color\left)\text{将色度旋转}180\text{度，从而使得色轮与原来的颜色互补。}invert\right($color)将色度旋转180度，从而使得色轮与原来的颜色互补。invert(color)翻转变换所有的RGB成分，从而返回原色的反相版本。

3 列表函数

length($list)\text{函数最简单，它返回}$list)函数最简单，它返回list列表中项目的个数，如length(3 4 5)为3，length(fun)为1。

nth($list,$list,n)，返回列表中的第n个成员，不同其他编程语言，Sass列表中的成员从1开始计数，如，nth(red blue blue, 2)返回blue，nth(5 6 7, 1)返回5。

join($list1,$list1,list2, [$separator\left]\right)\text{函数两个列表}$separator])函数两个列表list1, $list2\text{连接起，创建新的列表。可选择的}$list2连接起，创建新的列表。可选择的separator参数用来决定列表的类型，一般是空格或者逗号。如果没有指明$separator\text{，那么合并后的列表类型取决于}$separator，那么合并后的列表类型取决于list1的类型。

以上就是SASS/SCSS的大部分内置函数的介绍，SASS/SCSS内置函数应用场景较为广泛，但并不能保证能够处理所有数值或颜色的操作。因此，SASS/SCSS允许用户定义自己的函数，大家可以移步这里：

SCSS的极简教程-函数与控制指令（二） - 掘金 juejin.cn/post/712718…

谢谢~