Sass内置函数

SASS 中的内置函数和 LESS 一样，SASS 中也提供了很多内置函数方便我们使用，官方文档：https://www.sass.hk/docs/

字符串函数

unquote($string);// 删除字符串中的引号；
quote($string);// 给字符串添加引号；
To-upper-case($string);// 将字符串小写字母转换为大写字母
To-lower-case($string);// 将字符串大写字母转换为小写字母

数值函数

percentage($value);// 将不带单位的数转换成百分比值；
round($value);// 将数值四舍五入，转换成一个最接近的整数；
ceil($value);// 向上取整；
floor($value);// 向下取整；
abs($value);// 取数的绝对值；
min($numbers…);// 找出几个数值之间的最小值；
max($numbers…);// 找出几个数值之间的最大值；
random();// 获取随机数

颜色函数

rgb($red, $green, $blue);// 根据红、绿、蓝三个值创建一个颜色；
rgba($red, $green, $blue, $alpha);// 根据红、绿、蓝和透明度值创建一个颜色；
red($color);// 从一个颜色中获取其中红色值；
green($color);// 从一个颜色中获取其中绿色值；
blue($color);// 从一个颜色中获取其中蓝色值；
mix($color-1, $color-2, [$weight]);// 把两种颜色混合在一起。

列表函数

length($list);// 返回一个列表的长度值;
nth($list, $n);// 返回一个列表中指定的某个标签值;
join($list1, $list2, [$separator]);// 将两个列给连接在一起，变成一个列表；
append($list1, $val, [$separator]);// 将某个值放在列表的最后；
zip($lists…);// 将几个列表结合成一个多维的列表；
index($list, $value);// 返回一个值在列表中的位置值。

自定义 Sass 函数

官方文档：https://www.sass.hk/skill/sass14.html

@function square($num) {
  @return $num * $num + px;
}

div {
  width: square(2);
  height: 200px;
  background: mix(red, blue);
}