Sass 提供了一系列内置的函数来操作列表（List），这使得处理多个值变得非常方便。以下是 Sass 中常用的列表函数及其用法：
1. length($list)
当然，length($list) 函数用于返回 Sass 列表中元素的数量。下面是一个简单的示例，展示了如何使用 length($list) 函数：
示例：计算颜色列表的长度
假设我们有一个包含多种颜色的列表，并希望知道这个列表中有多少种颜色。
// 定义一个颜色列表
$colors: red, green, blue, yellow, purple;// 使用 length() 函数计算列表中的元素数量
$total-colors: length($colors);// 输出结果到 CSS 中
.color-count {content: "There are #{$total-colors} colors in the list.";
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.color-count {content: "There are 5 colors in the list.";
}
更多应用示例
你可以将 length() 函数与循环结合使用，以根据列表长度动态生成样式。例如，为每个颜色创建一个带有背景色的 div。
$colors: red, green, blue, yellow, purple;
$total-colors: length($colors);@for $i from 1 through $total-colors {.color-#{$i} {background-color: nth($colors, $i);width: 100px;height: 100px;margin: 5px;}
}
编译后的 CSS
这段 SCSS 将会编译成如下 CSS，为每一种颜色创建一个对应的类：
.color-1 {background-color: red;width: 100px;height: 100px;margin: 5px;
}.color-2 {background-color: green;width: 100px;height: 100px;margin: 5px;
}.color-3 {background-color: blue;width: 100px;height: 100px;margin: 5px;
}.color-4 {background-color: yellow;width: 100px;height: 100px;margin: 5px;
}.color-5 {background-color: purple;width: 100px;height: 100px;margin: 5px;
}
通过这些例子，你应该能够理解如何在 Sass 中使用 length($list) 函数来获取列表的长度了。
2. nth($list, $n)
nth($list, $n) 函数用于返回 Sass 列表中第 $n 个位置的值。如果 $n 是正数，它将从列表的开头开始计数；如果 $n 是负数，则会从列表的末尾开始计数。
下面是一个使用 nth($list, $n) 函数的例子：
示例：选择特定的颜色
假设我们有一个包含多种颜色的列表，并希望获取其中的某一种颜色来应用到样式中。
// 定义一个颜色列表
$colors: red, green, blue, yellow, purple;// 使用 nth() 函数获取列表中的第三个元素（即蓝色）
$third-color: nth($colors, 3);// 将获取的颜色应用于 CSS 类
.example-box {background-color: $third-color;width: 100px;height: 100px;
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.example-box {background-color: blue;width: 100px;height: 100px;
}
更多应用示例
你也可以使用 nth() 函数与循环结合，创建基于列表元素动态生成的样式。例如，我们可以为每个颜色创建一个带有背景色的 div，并且为这些 div 添加不同的边框颜色，该边框颜色是从原列表中按照一定规则选取的另一个颜色。
$colors: red, green, blue, yellow, purple;
$total-colors: length($colors);@for $i from 1 through $total-colors {// 获取当前颜色作为背景色$background-color: nth($colors, $i);// 获取下一个颜色作为边框色，如果到了列表末尾，则回到列表第一个颜色$border-color: nth($colors, if($i == $total-colors, 1, $i + 1));.color-#{$i} {background-color: $background-color;border: 5px solid $border-color;width: 100px;height: 100px;margin: 5px;}
}
这段 SCSS 将会编译成如下 CSS，为每一种颜色创建一个对应的类，并为每个类设置不同的边框颜色：
.color-1 {background-color: red;border: 5px solid green;width: 100px;height: 100px;margin: 5px;
}.color-2 {background-color: green;border: 5px solid blue;width: 100px;height: 100px;margin: 5px;
}.color-3 {background-color: blue;border: 5px solid yellow;width: 100px;height: 100px;margin: 5px;
}.color-4 {background-color: yellow;border: 5px solid purple;width: 100px;height: 100px;margin: 5px;
}.color-5 {background-color: purple;border: 5px solid red;width: 100px;height: 100px;margin: 5px;
}
通过这些例子，你应该可以理解如何在 Sass 中使用 nth($list, $n) 函数来访问列表中的特定元素了。
3. join($list1, $list2, [$separator])
join($list1, $list2, [$separator]) 函数用于将两个 Sass 列表合并成一个列表。可选参数 $separator 可以指定新列表中元素之间的分隔符，默认是逗号 ,。如果两个列表使用不同的分隔符，Sass 会根据 $separator 参数或默认选择一个。
下面是一个具体的例子，展示如何使用 join($list1, $list2, [$separator]) 函数：
示例：合并两个颜色列表
假设我们有两个颜色列表，并希望将它们合并成一个新的列表，然后基于这个新的列表生成一系列样式规则。
// 定义两个颜色列表
$primary-colors: red, green, blue;
$secondary-colors: orange, purple;// 使用 join() 函数合并两个列表，默认使用逗号作为分隔符
$all-colors: join($primary-colors, $secondary-colors);// 或者指定空格作为分隔符
// $all-colors: join($primary-colors, $secondary-colors, space);// 动态生成样式规则
@each $color in $all-colors {.#{$color}-box {background-color: $color;width: 100px;height: 100px;margin: 5px;}
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.red-box {background-color: red;width: 100px;height: 100px;margin: 5px;
}.green-box {background-color: green;width: 100px;height: 100px;margin: 5px;
}.blue-box {background-color: blue;width: 100px;height: 100px;margin: 5px;
}.orange-box {background-color: orange;width: 100px;height: 100px;margin: 5px;
}.purple-box {background-color: purple;width: 100px;height: 100px;margin: 5px;
}
通过这例子，你应该能够理解如何在 Sass 中使用 join($list1, $list2, [$separator]) 函数来合并两个列表了。
4. append($list, $val, [$separator])
append($list, $val, [$separator]) 函数用于向一个 Sass 列表的末尾添加一个新的值，并返回新的列表。可选参数 $separator 可以指定新列表中元素之间的分隔符，默认是逗号 ,。
下面是一个具体的例子，展示如何使用 append($list, $val, [$separator]) 函数：
示例：向颜色列表添加新颜色
假设我们有一个包含几种颜色的列表，并希望在列表末尾添加一种新的颜色。然后我们将基于更新后的列表生成一系列样式规则。
// 定义一个初始的颜色列表
$colors: red, green, blue;// 使用 append() 函数向列表末尾添加新颜色 'purple'，默认使用逗号作为分隔符
$updated-colors: append($colors, purple);// 或者指定空格作为分隔符
// $updated-colors: append($colors, purple, space);// 动态生成样式规则
@each $color in $updated-colors {.#{$color}-box {background-color: $color;width: 100px;height: 100px;margin: 5px;}
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.red-box {background-color: red;width: 100px;height: 100px;margin: 5px;
}.green-box {background-color: green;width: 100px;height: 100px;margin: 5px;
}.blue-box {background-color: blue;width: 100px;height: 100px;margin: 5px;
}.purple-box {background-color: purple;width: 100px;height: 100px;margin: 5px;
}
示例：合并多个列表
你还可以结合 append() 和循环来构建复杂的列表结构。
// 定义两个列表
$primary-colors: red, green, blue;
$additional-colors: orange, purple;// 初始化一个空列表
$all-colors: ();// 使用 @each 循环遍历 $additional-colors 并逐一添加到 $all-colors 中
@each $color in $primary-colors {$all-colors: append($all-colors, $color);
}@each $color in $additional-colors {$all-colors: append($all-colors, $color);
}// 动态生成样式规则
@each $color in $all-colors {.#{$color}-box {background-color: $color;width: 100px;height: 100px;margin: 5px;}
}
这段代码将会编译成如下的 CSS，其中包含了所有颜色的样式规则：
.red-box {background-color: red;width: 100px;height: 100px;margin: 5px;
}.green-box {background-color: green;width: 100px;height: 100px;margin: 5px;
}.blue-box {background-color: blue;width: 100px;height: 100px;margin: 5px;
}.orange-box {background-color: orange;width: 100px;height: 100px;margin: 5px;
}.purple-box {background-color: purple;width: 100px;height: 100px;margin: 5px;
}
通过这些例子，你应该能够理解如何在 Sass 中使用 append($list, $val, [$separator]) 函数来向列表末尾添加新元素了。
5. zip($lists...)
zip($lists...) 函数用于将多个 Sass 列表压缩成一个列表，其中每个元素都是由原列表对应位置的元素组成的列表。这个函数非常适合用来并行处理多个列表的数据。
下面是一个具体的例子，展示如何使用 zip($lists...) 函数：
示例：创建带背景色和文本颜色的样式规则
假设我们有两个列表，一个包含背景颜色，另一个包含文本颜色，并且我们希望为每一对颜色创建一个样式规则。
// 定义两个列表：一个用于背景颜色，一个用于文本颜色
$background-colors: red, green, blue;
$text-colors: white, black, yellow;// 使用 zip() 函数将两个列表合并为一个列表，其中每个元素都是由原列表对应位置的颜色组成的对
$color-pairs: zip($background-colors, $text-colors);// 动态生成样式规则
@each $pair in $color-pairs {// 解构每个 $pair，获取背景颜色和文本颜色$bg-color: nth($pair, 1);$text-color: nth($pair, 2);.#{$bg-color}-box {background-color: $bg-color;color: $text-color;width: 100px;height: 100px;margin: 5px;display: inline-block;text-align: center;line-height: 100px; // 让文本垂直居中}
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.red-box {background-color: red;color: white;width: 100px;height: 100px;margin: 5px;display: inline-block;text-align: center;line-height: 100px;
}.green-box {background-color: green;color: black;width: 100px;height: 100px;margin: 5px;display: inline-block;text-align: center;line-height: 100px;
}.blue-box {background-color: blue;color: yellow;width: 100px;height: 100px;margin: 5px;display: inline-block;text-align: center;line-height: 100px;
}
在这个例子中，zip() 函数将 $background-colors 和 $text-colors 列表中的元素一一配对，然后通过循环遍历这些配对来生成相应的样式规则。每个 .box 类都有对应的背景颜色和文本颜色，从而可以轻松创建一组带有不同背景和文本颜色的盒子。
通过这个例子，你应该能够理解如何在 Sass 中使用 zip($lists...) 函数来并行处理多个列表了。
6. index($list, $value)
index($list, $value) 函数用于查找列表中某个值的位置，返回该值第一次出现的索引。如果找不到该值，则返回 null。索引从1开始计数。
下面是一个具体的例子，展示如何使用 index($list, $value) 函数：
示例：查找颜色在列表中的位置
假设我们有一个包含多种颜色的列表，并希望知道某种特定颜色在这个列表中的位置。
// 定义一个颜色列表
$colors: red, green, blue, yellow, purple;// 使用 index() 函数查找 'blue' 在列表中的位置
$position-of-blue: index($colors, blue);// 输出结果到 CSS 中
.color-position {content: "The position of blue is #{$position-of-blue}.";
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.color-position {content: "The position of blue is 3.";
}
在这个例子中，index() 函数成功找到了 'blue' 在 $colors 列表中的位置是第3个元素（索引为3），并将这个信息输出到了 .color-position 类的内容属性中。
更多应用示例
你也可以结合 index() 函数和其他 Sass 功能来实现更复杂的功能。例如，根据颜色在列表中的位置动态生成样式规则：
// 定义一个颜色列表
$colors: red, green, blue, yellow, purple;// 动态生成样式规则
@each $color in $colors {// 查找当前颜色的位置$position: index($colors, $color);.color-#{$position} {background-color: $color;width: 100px;height: 100px;margin: 5px;display: inline-block;// 如果颜色是蓝色，则添加特殊样式@if $color == blue {border: 2px solid black;}}
}
这段代码将会编译成如下的 CSS，其中每个颜色都有对应的类，并且蓝色的盒子会有一个黑色边框：
.color-1 {background-color: red;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.color-2 {background-color: green;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.color-3 {background-color: blue;width: 100px;height: 100px;margin: 5px;display: inline-block;border: 2px solid black;
}.color-4 {background-color: yellow;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.color-5 {background-color: purple;width: 100px;height: 100px;margin: 5px;display: inline-block;
}
通过这些例子，你应该能够理解如何在 Sass 中使用 index($list, $value) 函数来查找列表中某个值的位置了。
7. set-nth($list, $n, $value)
set-nth($list, $n, $value) 函数用于修改 Sass 列表中第 $n 个元素的值，并返回新的列表。这个函数不会改变原始列表，而是创建并返回一个包含更新后元素的新列表。
下面是一个具体的例子，展示如何使用 set-nth($list, $n, $value) 函数：
示例：更新颜色列表中的特定颜色
假设我们有一个包含多种颜色的列表，并希望更新其中的某一种颜色。我们将使用 set-nth() 函数来实现这一点。
// 定义一个初始的颜色列表
$colors: red, green, blue, yellow;// 使用 set-nth() 函数将列表中的第三个颜色（即蓝色）更新为紫色
$updated-colors: set-nth($colors, 3, purple);// 动态生成样式规则
@each $color in $updated-colors {.#{$color}-box {background-color: $color;width: 100px;height: 100px;margin: 5px;display: inline-block;}
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.red-box {background-color: red;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.green-box {background-color: green;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.purple-box {background-color: purple;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.yellow-box {background-color: yellow;width: 100px;height: 100px;margin: 5px;display: inline-block;
}
在这个例子中，set-nth() 函数成功地将 $colors 列表中的第三个元素从 'blue' 更新为 'purple'，然后基于更新后的列表 $updated-colors 生成了相应的样式规则。每个 .box 类都有对应的背景颜色，原来的蓝色盒子现在变成了紫色。
通过这个例子，你应该能够理解如何在 Sass 中使用 set-nth($list, $n, $value) 函数来更新列表中特定位置的元素了。
8. list-separator($list)
list-separator($list) 函数用于返回 Sass 列表中元素之间的分隔符，可以是逗号 , 或空格 space。这个函数可以帮助你了解列表的结构，尤其是在你需要根据不同的分隔符来处理或生成样式时。
下面是一个具体的例子，展示如何使用 list-separator($list) 函数：
示例：检查并显示列表的分隔符
假设我们有两个列表，一个用逗号分隔，另一个用空格分隔，并且我们想要检查每个列表使用的分隔符类型，并在 CSS 中输出这些信息。
// 定义两个不同分隔符的列表
$comma-separated: red, green, blue;
$space-separated: red green blue;// 使用 list-separator() 函数获取列表的分隔符
$separator1: list-separator($comma-separated);
$separator2: list-separator($space-separated);// 输出结果到 CSS 中
.separator-info {content: "The first list uses #{$separator1} as separator and the second uses #{$separator2}.";
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.separator-info {content: "The first list uses comma as separator and the second uses space.";
}
在这个例子中，list-separator() 函数成功地检测到了 $comma-separated 列表使用的是逗号作为分隔符，而 $space-separated 列表使用的是空格作为分隔符，并将这些信息通过 CSS 的 content 属性输出。
更多应用示例
你也可以结合 list-separator() 函数和其他 Sass 功能来实现更复杂的功能。例如，基于列表的分隔符类型来决定如何处理列表数据：
// 定义一个函数，根据分隔符类型返回不同的样式前缀
@function get-style-prefix($list) {$sep: list-separator($list);@if $sep == comma {@return "comma-";} @else if $sep == space {@return "space-";} @else {@return "";}
}// 定义两个不同分隔符的列表
$comma-separated: red, green, blue;
$space-separated: red green blue;// 动态生成样式规则，使用 get-style-prefix 函数添加适当的前缀
@each $color in $comma-separated {.#{get-style-prefix($comma-separated)}#{$color}-box {background-color: $color;width: 100px;height: 100px;margin: 5px;display: inline-block;}
}@each $color in $space-separated {.#{get-style-prefix($space-separated)}#{$color}-box {background-color: $color;width: 100px;height: 100px;margin: 5px;display: inline-block;}
}
这段代码将会编译成如下的 CSS，其中根据列表的分隔符类型为每个颜色盒子类添加了相应的前缀：
.comma-red-box {background-color: red;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.comma-green-box {background-color: green;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.comma-blue-box {background-color: blue;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.space-red-box {background-color: red;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.space-green-box {background-color: green;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.space-blue-box {background-color: blue;width: 100px;height: 100px;margin: 5px;display: inline-block;
}
通过这些例子，你应该能够理解如何在 Sass 中使用 list-separator($list) 函数来检测列表的分隔符类型了。
9. is-bracketed($list)
is-bracketed($list) 函数用于判断一个 Sass 列表是否为括号包围的形式，即列表是否被括号 () 包围。如果列表是括号包围的，则返回 true；否则返回 false。
下面是一个具体的例子，展示如何使用 is-bracketed($list) 函数：
示例：检查列表是否为括号包围
假设我们有两个列表，一个用中括号包围，另一个没有，并希望检查每个列表是否为中括号包围形式。
// 定义两个列表：一个有括号包围，一个没有
$bracketed-list: [red green blue];
$non-bracketed-list: red, green, blue;// 使用 is-bracketed() 函数检查列表是否为括号包围
$is-bracketed1: is-bracketed($bracketed-list);
$is-bracketed2: is-bracketed($non-bracketed-list);// 输出结果到 CSS 中
.bracket-check {content: "The first list is bracketed: #{$is-bracketed1}. The second list is bracketed: #{$is-bracketed2}.";
}
编译后的 CSS
编译上述 SCSS 代码后，将得到如下 CSS：
.bracket-check {content: "The first list is bracketed: true. The second list is bracketed: false.";
}
在这个例子中，is-bracketed() 函数成功地检测到了 $bracketed-list 是由括号包围的，而 $non-bracketed-list 不是由括号包围的，并将这些信息通过 CSS 的 content 属性输出。
更多应用示例
你也可以结合 is-bracketed() 函数和其他 Sass 功能来实现更复杂的功能。例如，根据列表是否为括号包围来决定如何处理或生成样式规则。
示例：基于是否括号包围生成不同的样式规则
// 定义两个列表：一个有括号包围，一个没有
$bracketed-list: [red green blue];
$non-bracketed-list: red, green, blue;// 定义一个函数，根据列表是否括号包围返回不同的样式前缀
@function get-style-prefix($list) {@if is-bracketed($list) {@return "bracketed-";} @else {@return "non-bracketed-";}
}// 动态生成样式规则，使用 get-style-prefix 函数添加适当的前缀
@each $color in $bracketed-list {.#{get-style-prefix($bracketed-list)}#{$color}-box {background-color: $color;width: 100px;height: 100px;margin: 5px;display: inline-block;}
}@each $color in $non-bracketed-list {.#{get-style-prefix($non-bracketed-list)}#{$color}-box {background-color: $color;width: 100px;height: 100px;margin: 5px;display: inline-block;}
}
这段代码将会编译成如下的 CSS，其中根据列表是否为括号包围为每个颜色盒子类添加了相应的前缀：
.bracketed-red-box {background-color: red;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.bracketed-green-box {background-color: green;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.bracketed-blue-box {background-color: blue;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.non-bracketed-red-box {background-color: red;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.non-bracketed-green-box {background-color: green;width: 100px;height: 100px;margin: 5px;display: inline-block;
}.non-bracketed-blue-box {background-color: blue;width: 100px;height: 100px;margin: 5px;display: inline-block;
}
通过这个例子，你应该能够理解如何在 Sass 中使用 is-bracketed($list) 函数来检测列表是否为括号包围形式了。
这些函数可以帮助你在 Sass 中更有效地操作和管理列表数据。