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

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

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

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

1 数值函数

数值函数	描述
abs($number)	取绝对值
ceil($number)	向上取整
comparable($number1,$number2)	返回number1和nunber2是否能比较
floor($number)	向下取整
precentage($number)	将小数转为百分数
round($number)	将number转成最接近的整数
unit($number)	返回number的单位
unitless($number)	返回number是否没有单位

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

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

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

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

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

2 颜色函数

颜色函数	描述
alpha($color)/opacity($color)	返回alpha通道
blue($color)	返回蓝色通道
green($color)	返回绿色通道
red($color)	返回红色通道
hue($color)	返回色度属性
lightness($color)	返回亮度属性
saturation($color)	返回饱和度属性
adjust($color,...)	按照给定的颜色成份值，调整color的各个属性
complement($color)	返回色环与互补
grayscale($color)	返回灰度版本
invert($color)	返回反相版本
mix($color,$color2,[$weight])	按照$weight的百分比，返回color1和color2混合一起的颜色
sacle($color,...)	按照百分比调整color的各个属性
set($color,...)	将color的各个属性设置为固定值

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

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

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

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

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

3 列表函数

列表函数	描述
length($list)	它返回$list列表中项目的个数
nth($list,$n)	返回列表中的一个单独项目（第n个）
join($list1,$list2, [$separator])	用来创建新的列表。它将两个列表连接起来

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

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

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

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

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

谢谢~