Sass 列表函数
学习使用 Sass 列表函数操作和遍历列表数据。 · 难度：入门 · +15XP
列表函数简介
Sass 列表（List）是有序的值集合，可以用逗号或空格分隔。列表函数提供了访问、修改和遍历列表的能力。
创建列表
$font-stack: 'Helvetica', 'Arial', sans-serif;
$spacings: 5px 10px 15px 20px;常用列表函数
| 函数 | 描述 | 示例 |
|---|---|---|
length($list) | 返回列表项数 | length(10px 20px 30px) → 3 |
nth($list, $n) | 返回第n项（从1开始） | nth(10px 20px, 2) → 20px |
join($list1, $list2) | 合并两个列表 | join((a b), (c d)) → a b c d |
append($list, $val) | 在末尾追加值 | append((a b), c) → a b c |
index($list, $val) | 返回值的位置（从1开始） | index(a b c, b) → 2 |
遍历列表
使用 @each 指令遍历列表。
$sizes: 12px, 14px, 16px, 18px;
@each $size in $sizes {
.text-#{$size} {
font-size: $size;
}
}列表与 Map 的关系
Map 是键值对的列表，列表函数同样适用于 Map 的键或值列表。
$colors: (primary: blue, secondary: green);
$keys: map-keys($colors); // 返回列表 (primary, secondary)
@each $key in $keys {
.#{$key} { color: map-get($colors, $key); }
}练习提示
创建一个包含不同字体大小的列表，使用 @each 生成对应的文本类，并利用 nth 函数为奇偶项添加不同颜色。