Skip to main content

Sass Function

自定义函数​

语法​

Sass支持函数指令，语法如下：

@function fn-name($params...){
  @return XXX;
}

示例如下：

/* 定义函数 */
@function divide($a, $b){
  @return $a / $b
};

.container {
  /* 使用函数 */
  width: divide(100px, 2)
}

不定参数​

函数可以接收多个参数，如果不确定会传递几个参数，那么可以使用不定参数的形式：

@function sum($nums...) {
  $sum: 0;
  @each $n in $nums {
    $sum: $sum + $n;
  }
  @return $sum;
}

.box1 {
  width: sum(1, 2, 3) + px;
}

.box2 {
  width: sum(1, 2, 3, 4, 5, 6) + px;
}

内置函数​

除了自定义函数，Sass 里面还提供了非常多的内置函数，官方文档：

字符串函数​

函数名函数作用
quote($string)为字符串添加引号。
unquote($string)移除字符串中的引号。
to-lower-case($string)将字符串中的所有字母转换为小写。
to-upper-case($string)将字符串中的所有字母转换为大写。
str-length($string)返回字符串的长度（汉字算一个字符）。
str-index($string, $substring)返回 $substring 在 $string 中的位置。
str-insert($string, $insert, $index)在 $string 的 $index 处插入 $insert 字符串。
str-slice($string, $start-at, $end-at)截取 $string 的从 $start-at 到 $end-at 之间的子字符串。

索引是从1开始的，是-1，那么就是倒着来，且两边都是闭区间。

$str: "Hello world!";

.slice1{
  /* content: "Hello"; */
  content: str-slice($str, 1, 5)
}

.slice2{
  /* content: "!"; */
  content: str-slice($str, -1)
}

数字函数​

函数名函数作用
percentage($number)将数字转换为百分比形式。
round($number)将数字四舍五入为整数。
ceil($number)将数字向上取整。
floor($number)将数字向下取整。
abs($number)获取数字的绝对值。
min($number...)返回传入数值中的最小值。
max($number...)返回传入数值中的最大值。
random($number?:number)不传值时：返回0-1的随机数；传入正整数n时：返回0到n之间的随机整数（左开右闭区间）。
.item{
  width: percentage(2/5);
  height: random(100) + px;
  color: rgb(random(255),random(255),random(255));
}

数组函数​

函数名函数作用
length($list)获取数组的长度。
nth($list, n)获取数组中第 n 个元素。
set-nth($list, n, $value)向数组的第 n 个位置插入 $value。
join($list1, $list2, $separator)拼接 $list1 和 $list2，$separator 为新数组的分隔符，默认为 auto，可选择 comma 或 space。
append($list, $val, $separator)向数组末尾添加 $val，$separator 为新数组的分隔符，默认为 auto，可选择 comma 或 space。
index($list, $value)返回 $value 在数组中的索引值。
zip($lists…)将多个数组组合成一个多维数组，要求每个数组的长度相同。
$list1: 1px solid, 2px dotted;
$list2: 3px dashed, 4px double;
/*  1px solid, 2px dotted,3px dashed, 4px double  */
$combined-list: join($list1, $list2, comma);

$base-colors: red, green, blue;
/*  red, green, blue, yellow */
$extended-colors: append($base-colors, yellow, comma);

$fonts: "Arial", "Helvetica", "Verdana";
$weights: "normal", "bold", "italic";
/* $font-pair: ("Arial", "normal"),("Helvetica", "bold"),("Verdana","italic") */
$font-pair: zip($fonts, $weights);

字典函数​

函数名函数作用
map-get($map, $key)获取 $map 中 $key 对应的 $value。
map-merge($map1, $map2)合并 $map1 和 $map2，返回一个新的 $map。
map-remove($map, $key)从 $map 中删除 $key，返回一个新的 $map。
map-keys($map)返回 $map 中所有的 $key。
map-values($map)返回 $map 中所有的 $value。
map-has-key($map, $key)判断 $map 中是否存在 $key，返回布尔值。
keywords($args)返回函数的参数，并允许动态修改其值。
/* 创建一个颜色映射表  */
$colors: (
  "primary": #007bff,
  "secondary": #6c757d,
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
  "danger": #dc3545,
);

/* 演示通过 map-get 获取对应的值 */
@function btn-color($color-name){
  @return map-get($colors, $color-name);
}

/* 通过 map-keys 获取映射表所有的 keys  */
$color-keys: map-keys($colors);

/* 新的颜色映射表  */
$more-colors:(
  "light": #f8f9fa,
  "dark": #343a40
);

/* 将新的颜色映射表合并到 $colors 里面  */
$all-colors: map-merge($colors, $more-colors);

颜色函数​

RGB​
函数名函数作用
rgb($red, $green, $blue)返回一个由红、绿、蓝三种颜色组成的16进制颜色值。
rgba($red, $green, $blue, $alpha)返回一个带有透明度的 RGBA 颜色值，红、绿、蓝值可以为颜色单词、hsl、rgb 或 16 进制形式传入。
red($color)从 $color 中获取其中的红色值。
green($color)从 $color 中获取其中的绿色值。
blue($color)从 $color 中获取其中的蓝色值。
mix($color1, $color2, $weight?)按照权重 $weight，将 $color1 和 $color2 混合为一个新颜色。
HSL​
函数名函数作用
hsl($hue, $saturation, $lightness)根据色相（hue）、饱和度（saturation）和亮度（lightness）创建一个 HSL 颜色。
hsla($hue, $saturation, $lightness, $alpha)根据色相（hue）、饱和度（saturation）、亮度（lightness）和透明度（alpha）创建一个 HSLA 颜色。
saturation($color)从 $color 中获取饱和度值。
lightness($color)从 $color 中获取亮度值。
adjust-hue($color, $degrees)通过改变颜色的色相值来创建一个新的颜色。
lighten($color, $amount)通过增加亮度值让颜色变亮，创建一个新颜色。
darken($color, $amount)通过减少亮度值让颜色变暗，创建一个新颜色。
hue($color)从 $color 中获取色相（hue）值。
Opacity​
函数名函数作用
alpha($color) / opacity($color)获取 $color 的透明度值。
rgba($color, $alpha)改变 $color 的透明度值为 $alpha。
opacify($color, $amount) / fade-in($color, $amount)通过增加 $amount 使 $color 变得更不透明。
transparentize($color, $amount) / fade-out($color, $amount)通过减少 $amount 使 $color 变得更加透明。

其他函数​

函数名函数作用
type-of($value)返回 $value 的数据类型。
unit($number)返回 $number 的单位。
unitless($number)判断 $number 是否没有单位，没有单位返回 true，否则返回 false。
comparable($number1, $number2)判断 $number1 和 $number2 是否可以进行加减运算或合并，返回布尔值。
Last updated on