Sass内置模块

在 Sass 里，为了更好开发效率和解耦，提供了一些内置模块让开发者使用。

列举了一些比较常用的内置模块

list

这个就类似于 JavaScript 中的数组， 可以用中括号或者逗号隔开来定义 list

// 例如[a,b,c,d] a,b,c,d
$variable: a, b, c, d;

又或者通过 list.append()的方法

@use 'sass:list';
list.append(a,b,c,d)

而这个内置 list 库，还提供很多方法，帮助修改或操作 list。 Note: Sass 和 JavaScript 不同的是，Sass 的 list 是 immutable 变量。

如：

• append — 创建并添加元素
• index — 查找索引
• join — 将两个 list 合并成一个
• length — 获取长度
• nth — 获取第 n 个元素

...等

map

这个类似于 JavaScript 中的对象，这个在 sass 中常用于定义样式库变量。

通过小括号来定义 map（主要中括号用来定义样式界限了）

// 例如 ("a": "b", "c": "d")
$variable: (
  'a': 'b',
  'c': 'd',
);

Sass 也提供一个 map 内置库帮助修改或操作 map。 Note： 跟 list 一样是 immutable 变量。

get — 通过 key 获取 value

remove — 通过 key 删除 key-value

has-key — 判断是否存在这个 key

merge — 两个 map 指定的 key 合成一个 map

set — 设置新的 key-value

...等

math

与 JavaScript 的 math 类似，提供一堆数学方法和变量

$e - 数学 e 2.7182818285

$pi - π 3.14159

ceil/floor/round/abs/pow/sqrt/...等 - 同 JS Math.ceil/floor/round/abs/pow/sqrt 等

min - 获取两者最小，与 css 的不同，css 会根据屏幕大小的来

max - 取两者最大，同上

clamp = max(min($min, $number), $max)， 与 css 不同。

...等

string

这个是最常用的内置模块了，加引号或不加引号都可以定义 string

主要提及一下 string 的类库

quote — 加上括号

index — 同 JS 的 index

insert — 在某个位置插入字符串

length — 获取长度

slice — 同 JS 的 slice

unique-id — 随机生成 id

meta

这个内置模块主要提供一些常用的 sass 功能。

load-css — 同@use 的使用

call — 同 function 直接调用

global-variable-exists — 判断全局变量是否存在，不会判断局部变量

keywords — 结合 mixin 或 function 使用，获取参数列表，结果为一个 map

mixin-exists / function-exisit — 判断 mixin 或 function 是否存在

type-of — 获取类型

...等