在 Sass 中，列表（Lists） 是核心数据类型之一，类似于其他编程语言中的“数组”，用于存储有序的值集合。以下是 Sass 列表的详细说明，涵盖定义、操作、函数及实际应用：

一、基本定义

列表是 用逗号或空格分隔的值集合，可以是任意数据类型（包括嵌套列表）。列表的索引从 1 开始（非 0）。 语法示例:

// 逗号分隔列表
$font-stack: "Helvetica", "Arial", sans-serif;

// 空格分隔列表
$spacing: 10px 20px 30px;

// 混合类型列表
$mixed: 42, "text", #ff0000, (nested 1 2 3);

// 空列表
$empty: ();

二、分隔符

• 显式分隔符：使用逗号 , 或空格分隔元素。

• 单元素列表：需显式标明分隔符，否则会被视为普通值：

  $single-space: (10px); // 视为单个值（非列表）
  $single-comma: (10px, 20px, 30px); // 逗号分隔的单元素列表

三、列表操作与函数

1、访问元素

索引从 1 开始（非 0）：

函数	作用	示例	编译结果
nth($list, $index)	访问指定位置的元素	nth((red, green, blue), 2)	green

2、添加/删除元素

函数	作用	示例	编译结果
append($list, $value)	末尾添加元素	append((a b), c)	a b c
join($list1, $list2)	合并两个列表	join((a, b), (c))	a, b, c
list.set-nth($list, $n, $value)	修改指定位置的元素	set-nth((a b c), 2, x)	a x c

3、遍历列表

使用 @each 循环遍历：

$sizes: 10px, 20px, 30px;
@each $size in $sizes {
  .icon-#{$size} {
    width: $size;
  }
}

编译结果：

.icon-10px {
  width: 10px;
}
.icon-20px {
  width: 20px;
}
.icon-30px {
  width: 30px;
}

4、其他常用函数

函数	作用	示例	编译结果
length($list)	获取列表长度	length(10px 20px)	2
index($list, $value)	查找值的索引（从 1 开始）	index((a, b, c), b)	2
is-bracketed($list)	判断列表是否用方括号包裹	is-bracketed([a b])	true
list.separator($list)	获取列表分隔符（comma/space）	separator((a, b))	"comma"
zip($lists)	将多个列表重新按照相同索引分组，生成新的多维度列表。	zip(1px 2px 3px, solid dashed dotted, red green blue)	1px solid red, 2px dashed green, 3px dotted blue

四、高级特性

1、嵌套列表

列表可以嵌套多层，需注意分隔符优先级：

$matrix: ( (1 2), (3 4) ); // 二维列表
nth(nth($matrix, 2), 1)    // 3

2、方括号列表

使用 [] 包裹列表以保留分隔符语义：

$grid: [col-start] 1fr [col-end];
is-bracketed($grid) → true; // 检查是否被方括号包裹

3、不可变性

Sass 列表是 不可变 的，所有函数返回新列表，原列表不变：

$original: a b c;
$modified: append($original, d); // a b c d
$original → a b c; // 原列表未改变

五、实际应用场景

1、生成工具类

$spacing-sizes: 4, 8, 12;
@each $size in $spacing-sizes {
  .m-#{$size} {
    margin: #{$size}px;
  }
  .p-#{$size} {
    padding: #{$size}px;
  }
}

2、管理响应式断点

$breakpoints: (
  "small": 480px,
  "medium": 768px,
);
@mixin respond-to($key) {
  @media (min-width: map-get($breakpoints, $key)) {
    @content;
  }
}

3、多值属性简化

$shadow-values: 0 2px 4px rgba(0, 0, 0, 0.2);
.card {
  box-shadow: $shadow-values;
}

六、注意事项

1. 分隔符冲突：
   混合使用逗号和空格可能导致解析错误：

   $invalid: 10px, 20px 30px; // 错误：混合分隔符

2. 空列表处理：
   空列表 () 在某些函数中可能引发错误，需提前判断：

   @if length($list) > 0 { ... }

3. 性能优化：
   避免超长列表嵌套，可能影响编译速度。

七、总结

Sass 列表是动态生成样式、管理多值属性的核心工具。通过灵活使用列表函数和循环，可以显著提升代码复用性，减少重复劳动。掌握其分隔符规则和不可变性特性，是高效使用列表的关键！ 🔄

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24