Less - 列表函数

LESS - 列表函数

描述

LESS 提供了处理列表的函数。在 LESS 中，列表是一系列由逗号或空格分隔的值。这些函数允许你检查和提取列表中的值，使你的样式表更具动态性和可编程性。

关键的列表函数包括：

序号	函数	描述
1	length(list)	返回列表中元素的数量。列表可以是逗号分隔或空格分隔的。
2	extract(list, index)	返回列表中特定 index 位置的值。重要的一点是，LESS 中的列表索引是基于 1 的（1-based），这意味着第一个元素位于索引 1，第二个位于索引 2，依此类推。

示例

使用 length()

此函数计算列表中的项数。

LESS 代码：

@framework-paddings: 10px 20px 15px 25px;
@color-palette: red, green, blue;

.element-padding-count {
  content: length(@framework-paddings); // space-separated list
}

.color-count {
  content: length(@color-palette); // comma-separated list
}

编译后的 CSS：

.element-padding-count {
  content: 4;
}

.color-count {
  content: 3;
}

使用 extract()

此函数通过索引（基于 1）从列表中检索项。

LESS 代码：

@font-sizes: 12px, 16px, 24px, 32px;
@spacings: 5px 10px 15px 20px;

.title {
  font-size: extract(@font-sizes, 3); // 获取第 3 项：24px
}

.card {
  margin-top: extract(@spacings, 2); // 获取第 2 项：10px
  padding-left: extract(@spacings, 4); // 获取第 4 项：20px
}

编译后的 CSS：

.title {
  font-size: 24px;
}

.card {
  margin-top: 10px;
  padding-left: 20px;
}

实际应用

列表函数在创建工具类或管理一组相关值（如颜色调色板或间距比例）时特别有用。例如，你可以使用循环（通过混合宏和递归，或更新版本 LESS 中的 each() 函数）来迭代列表以生成一系列辅助类。

对于更高级的列表操作，你还可以探索 each() 函数。（详情请参阅 LESS 官方文档：lesscss.org/functions/#list-functions）