SASS常用内置函数

1，math

引入：@use "sass:math";

常用函数：

• ceil($number) - 向上取整
• floor($number) - 向下取整
• round($number) - 四舍五入
• max($number...) - 比较若干数值并取最大值
• min($number...) - 比较若干数值并取最小值
• random() - 取0~1之间的随机数

示例：

@use "sass:math";
 
@debug ceil(3.1); // 5
@debug max(5px, 2px, 3px); // 5px
@debug random(); // 0.6581354

2，string

引入：@use "sass:string";

常用函数：

• [str-]length($string) - 字符串长度（局部函数，全局函数前缀加str-）
• [str-]index($string, $substring) - 返回指定字符在字符串的索引位置（索引从1开始）
• [str-]slice($string, $start, $end) - 截取字符串
• [str-]insert($string, $insert, $index) - 向指定位置插入字符串
• to-upper-case($string) - 转换成大写字母
• to-lower-case($string) - 转换成小写字母
• quote($string) - 将字符串添加引号
• unquote($string) - 去除字符串的引号
• unique-id() - 随机生成一个当前环境下唯一的字符串

示例：

@use "sass:string";
 
@debug str-length("abc"); // 3
@debug str-slice("abcd", 2, 3); // "bc"
@debug quote(abc); // "abc"

3，list

引入：@use "sass:list";

常用函数：

• append($list, $val, [$spilt]) - 追加元素，$split参数为分隔符（space-空格，comma-逗号，slash-斜杠）
• index($list, $val) - 元素的索引位置，从1开始
• length($list) - 数组长度
• nth($list, $index) - 获取指定索引位置的值
• set-nth($list, $index, $val) - 设置指定位置的值

示例：

@use "sass:list";
 
$list1: 10px, 12px, 14px;
 
@debug append($list1, 16px); // 10px, 12px, 14px, 16px
@debug nth($list1, 2); // 12px

4，map

引入：@use "sass:map";

常用函数：

• [map-]get($map, $key, [$keys...]) - 通过key值获取value；支持传入多个key值获取深层的值
• [map.]set($map, $key, [$keys...], $value) - 设置key的值；支持传多个key设置深层的值
• [map-]keys($map) - 获取所有键的列表
• [map-]values($map) - 获取所有值的列表
• [map-]has-key($map, $key, [$keys...]) - 判断是否包含某个键；支持深层key
• [map-]remove($map, $keys...) - 移除一个或多个key
• [map.]deep-remove($map, $key, $keys...) - 移除深层的key
• [map-]merge($map1, $map2) - 浅层次合并两个map，相同的属性取$map2的值
• [map.]deep-merge($map1, $map2) - 深层次合并两个map

示例：

@use "sass:map";
 
// 定义map变量
$man: (
    name: "zhangsan",
    age: 18,
    like: (
        face: round,
        height: 18px
    )
)
 
@debug map-get($man, "name"); // "zhangsan"
@debug map-get($man, "like", "height"); // 18px
@debug map-has-key($man, "like"); // true
@debug map-merge((name: "a", age: 12), (name:"b", sex: 'x')); // (name: "b", age: 12, sex: 'x')

5，color

引入：@use "sass:color";

常用函数：

• mix($color1, $color2, $weight) - color1和color2颜色占比混合，$weight表示color1颜色的占比，从0% ~100%
• opacity($color) - 获取颜色的透明度
• opacity($color, $amont) - 设置颜色的透明度，$amont的值在0~1之间

示例：

@use "sass:color";
 
@debug mix(#409EFF, #FFFFFF, 10%); // #ECF5FF 蓝色取10%，更接近白色
@debug mix(#409EFF, #FFFFFF, 90%); // #53A8FF 蓝色取90%，更接近蓝色
@debug opacity(#F023FF, 0.5); // 透明度为0.5

6，meta

引入：@use "sass:meta";

常用函数：

• type-of($value) - 变量的类型，返回值例如string、number、list、map、color、function、null、bool（布尔类型boolean）、arglist（参数argument List）、calculation等
• function-exists($name, [$module]) - 判断某个模块或当前样式表是否存在指定的函数
• mixin-exists($name, [$module])- 判断某个模块或当前样式表是否存在指定的mixin
• variable-exists($name) - 判断当期作用域中是否存在指定的变量
• global-variable-exists($name, [$module]) - 判断某个模块或当前样式表是否存某个在全局变量或者全局函数

示例：

@use "sass:meta";
 
$h: 10px;
$q: 10px, 20px, 30px;
 
@debug type-of(12px); // number
@debug type-of($q); // list
@debug variable-exists($h); // true
@debug global-variable-exists($like); // false

7，selector

引入：@use "sass:selector";

常用函数：

• [selector-]append($selectors...) - 把多个选择器联合成一个
• [selector-]nest($selectors...) - 将多个选择器按顺序进行嵌套
• [selector-]replace($selector, $source, $target) - 将选择器中的指定选择器替换
• [selector-]selectors($selector) - 将选择器拆分成列表

示例：

@use "sass:selector";
 
@debug selector-append('span', '.active'); // span.active
@debug selector-nest('ul', 'li', '&:hover'); // ul li li:hover
@debug selector-replace('a.disabled', 'a', 'span'); // span.disabled
@debug selector-selectors('.contain.list:before'); // .contain .list :before