本文章已经发布很久了，文章的内容可能已经失效或者部分失效，请酌情参考。

学习和测试内置模块的API时，可以使用sass提供交互界面进行，也可以我们自己编写代码来看效果。

附：使用交互界面：

打开终端，输出 sass -i 进入。

常用内置模块

这个内置模块的属性和方法与JS 内置的属性和方法的用法差不多。

math 模块

math 模块主要用来处理numer类型的数据，有很多内置的属性和方法，可以直接使用它。

math.floor($number)：向下取整

@use 'sass:math' as math;
math.floor(110px);

使用例子：

@use 'sass:math' as math;
div { font-size: math.floor(157.6px);}

不过sass 也内置了一个函数，无需导入math模块，可以直接处理：

floor(157.6px);
// 使用例子
div { font-size: floor(157.6px); }

math.random($limit: null)：获取随机数

@use 'sass:math' as math;
// 0到1之间的随机数
math.random()
// 获取1-10之间的随机整数（含边界）
math.random(10)

也有内置的 random() 函数可以直接用。

math.percentage($number)：将小数转成百分比

@use 'sass:math' as math;
// 结果是53%
math.percentage(0.53)
// 结果是30%
math.percentage(3/10)

也有内置的 percentage() 函数可以直接用。

这里挑几个主要是为了说明使用方法，具体比较多，还是查文档吧。参考文档：https://sass-lang.com/documentation/modules/math/

string 模块

@use "sass:string" as string;
string.length('ABCDE')

内置的函数：

str-length('ABCDEF')

其它的请参考文档：https://sass-lang.com/documentation/modules/string/

color 模块

和其它模块一样，可以通过导入 color 模块后调用对应的方法，也可以直接使用其方法对应的内置函数直接处理，下面列出一些方法的意思，稍微有点多，更具体使用请参考文档：

1. 颜色创建和解析：

  • rgb($red, $green, $blue)：创建一个RGB颜色。

  • rgba($red, $green, $blue, $alpha)：创建一个带有透明度的RGB颜色。

  • hsl($hue, $saturation, $lightness)：创建一个HSL颜色。

  • hsla($hue, $saturation, $lightness, $alpha)：创建一个带有透明度的HSL颜色。

  • adjust-hue($color, $degrees)：调整颜色的色相。

    adjust-hue(red, 30deg);
2. 颜色转换：

  • adjust-color($color, $kwargs...);：

    相对于原来的色彩调整颜色属性的函数。它能够根据传入的参数调整颜色的各种属性，比如调整色相、饱和度、明度和透明度等。参数可以有：

    • $red：调整RGB颜色中的红通道的值
    • $green：调整RGB颜色中的绿通道的值
    • $blue：调整RGB颜色中的蓝通道的值
    • $hue：调整HSL颜色属性中的色相
    • $saturation：调整HSL颜色属性中的饱和度
    • $lightness：调整HSL颜色属性中的明度
    • $whiteness：调整HWB颜色属性中的白度
    • $blackness：调整HWB颜色属性中的黑度
    • $alpha：透明度
    // 调整 红通道和绿通道的值
adjust-color(red, $red: 100, $green: 100);
// 调整色相
adjust-color(red, $hue: 60deg);
// 调整透明度
adjust-color(red, $alpha: 0.1);

  • invert($color)：

    反转颜色。它将一个颜色转换为其互补色，也就是每个颜色通道的值都被倒转，即将其值从当前值减去 255。

    invert(rgb(100, 200, 20));
invert($color:rgb(100, 200, 20));

  • mix($color1, $color2, $weight)：

    混合两种颜色。$weight是一个可选参数，表示混合的权重，范围是0到100，默认是50。权重越高，越倾向于第一个颜色。

    mix(#f00, #000);
mix(#f00, #000, 70);

  • complement($color)：

    获取颜色的补色。补色是通过将给定颜色的HSL表示中的色相（Hue）值加上180度来得到的。这个函数可以用来找到与给定颜色互补的颜色，用于创建对比强烈的配色方案。

    complement(#ff0000);

  • change-color($color, $kwargs...)：

    根据传入的参数改变颜色的属性。它的参数和相adjust-color()的一样。区别是change-color将属性值调整到某个值，而adjust-color()是对于原始颜色调整属性值。

  • desaturate($color, $amount)：降低颜色的饱和度。

    • $color 是要处理的颜色。
    • $amount 是要减少的饱和度百分比值，范围从0%到100%。
    // 返回一个饱和度减少了20%的新颜色
desaturate(#3498db, 20%);

  • saturate($color, $amount)：增加颜色的饱和度。

  • hwb($hue, $whiteness, $blackness)：创建一个HWB颜色。

  • lighten($color, $amount)：增加颜色亮度的函数。

    • $color 是要处理的颜色。
    • $amount 是要增加的亮度值，可以是一个百分比值，范围从0%到100%。

  • darken($color, $amount)：减少颜色亮度的函数。

    • $color 是要处理的颜色。
    • $amount 是要增加的亮度值，可以是一个百分比值，范围从0%到100%。

  • opacify($color, $amount) / fade-in($color, $amount)：增加颜色的不透明度。

    opacify(rgba(107, 113, 127, 0.5), 0.2); // rgba(107, 113, 127, 0.7)

  • transparentize($color, $amount) / fade-out：降低颜色的不透明度。

  • scale-color($color, $kwargs)：

    按比例调整颜色的属性。它的参数和相adjust-color()的一样，不过每个关键字参数必须是一个介于-100%和100%（包括100%）之间的数字。

    scale-color(rgba(107, 113, 127, 0.5), $alpha: -40%);
3. 颜色信息获取：
  • red($color)：获取颜色的红色通道值。
  • green($color)：获取颜色的绿色通道值。
  • blue($color)：获取颜色的蓝色通道值。
  • hue($color)：获取颜色的色相值。
  • saturation($color)：获取颜色的饱和度值。
  • lightness($color)：获取颜色的明度值。
  • alpha($color)：获取颜色的透明度值。
  • whiteness($color)：获取颜色的白度值。
  • blackness($color)：获取颜色的黑度值。

参考文档：https://sass-lang.com/documentation/modules/color/

list 模块

和其它模块一样，可以通过导入 list 模块后调用对应的方法，也可以直接使用其方法对应的内置函数直接处理，下面是对一些对应函数的简要介绍：

  1. append($list1, $list2)
    将一个列表添加到另一个列表的末尾，并返回合并后的新列表。
$list1: 1, 2, 3;
$list2: 4, 5, 6;
$combinedList: append($list1, $list2); // 结果为 1, 2, 3, 4, 5, 6
  1. index($list, $value)
    返回给定值在列表中首次出现的位置（索引），如果值不在列表中，则返回 null。
$list: 'apple', 'orange', 'banana';
$index: index($list, 'orange');
  1. is-bracketed($list)
    检查列表是否是用中括号括起来的，返回布尔值 true 或 false。
$list1: 1, 2, 3;
$list2: [1px, 2px, 3px];
$isList1Bracketed: is-bracketed($list1); // 返回 false
$isList2Bracketed: is-bracketed($list2); // 返回 true
  1. join($list1, $list2, $separator: auto)
    将两个列表合并成一个，可指定连接符号（默认自动匹配），返回合并后的新列表。
$list1: 1, 2, 3;
$list2: 4, 5, 6;
$joinedListComma: join($list1, $list2); // 默认使用逗号分隔，结果为 1, 2, 3, 4, 5, 6
$joinedListSpace: join($list1, $list2, space); // 使用空格分隔，结果为 1 2 3 4 5 6
  1. length($list)
    返回列表的长度（元素个数）。
$list: 1, 2, 3, 4, 5;
$length: length($list); // 返回5
  1. list-separator($list)
    返回列表的分隔符，可能是 space(空格)、comma(逗号) 。
$listComma: 1, 2, 3;
$listSpace: 1 2 3;
$separatorComma: list-separator($listComma); // 返回 comma
$separatorSpace: list-separator($listSpace); // 返回 space
  1. nth($list, $n)
    返回列表中指定位置的元素，Sass中的索引从1开始。
$list: 10px, 20px, 30px;
$item: nth($list, 2); // 返回 20px（获取第二个元素）
  1. set-nth($list, $n, $value)
    将列表中指定位置的元素替换为给定值，返回修改后的列表。
$list: 1, 2, 3;
$modifiedList: set-nth($list, 2, 5); // 替换列表中第二个元素为5，结果为 1, 5, 3

  1. zip($lists...)
    将多个列表合并为一个二维列表，其中包含每个列表相同索引位置的元素组成的子列表。

    $list1: 1, 2, 3;
$list2: a, b, c;
$zippedList: zip($list1, $list2); // 返回一个包含两个列表对应位置元素的二维列表，结果为 1 a, 2 b, 3 c

参考文档：https://sass-lang.com/documentation/modules/list/

map 模块

文档上说的比较明白，而且英文读起来也不难，基本没有啥不好理解的概念，所以不在翻译，直接看文档就行。

参考文档：https://sass-lang.com/documentation/modules/map/

其它模块：

https://sass-lang.com/documentation/modules/meta/

https://sass-lang.com/documentation/modules/selector/