如何获取Sass列表的第n个值和键？

Question

如何在SASS中获取列表的第n项（值，键）？

假设存在以下列表：

$list: ( 
  'foo1': 11,
  'foo2': 22,
  'foo3': 33
);

例如，我想要第二个项目：

$2nd-key: 'foo2';
$2nd-value: 22;

Answer 1

那不是列表，而是地图。因此，您可以使用映射函数来提取值或键。有许多有趣的函数并且可以很好地与循环配合使用。

要回答您的问题，您可以使用例如其中的 2 个函数 ( map-keys()& map-values()) 从映射中创建键和值的列表，然后使用该nth()函数获取所需的值或键：

$map: ( 
  'foo1': 11,
  'foo2': 22,
  'foo3': 33
);

div{
  content:nth(map-keys($map), 2);
  z-index:nth(map-values($map), 2);
}

输出：

div {
  content: "foo2";
  z-index: 22;
}

nth()告诉 Sass 逐步遍历映射的每个值。否则，您只需将映射的第一个值 分配11给列表中的每个变量（如果有多个变量）。