SASS常用内置函数-Toy模板网

这篇具有很好参考价值的文章主要介绍了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() - 随机生成一个当前环境下唯一的字符串

示例：文章来源地址https://www.toymoban.com/news/detail-691549.html

@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

到了这里，关于SASS常用内置函数的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！