如何使用SCSS地图或列表中的单个项目？

Question

我有以下列表：

$reboot: (
    'color': #000,
    'font-size': 16px,
    'font-weight': 400,
    'font-family': -apple-system, BlinkMacSystemFont, 'Segoe UI',.........etc,
);

现在，我想使用color唯一的这种方式$reboot.color/ $reboot['color']或任何其他方式，这里我不需要循环。我需要在不同的地方一些特定的物品。

是否可以使用列表中的单个项目（无循环）？

Answer 1

这个结构就是一张地图。SASS 提供了一个get函数来访问映射中特定键的值。

你可以做

map.get($reboot, 'color'); 

只是为了获得一个值。

您可以在官方文档中获取更多相关信息

更新答案

您在编译 SASS 代码时遇到的其他问题与font-family地图内的分配有关。基本上，您提供一个逗号分隔值作为键的值font-family。

$reboot: (
  'font-family': -apple-system, BlinkMacSystemFont, 'Segoe UI'
);

在这里，一旦 SASS 编译器读取第一个逗号，-apple-system它就会将其视为值的结尾，并开始期望以下语句是另一个键值对。因此，抛出编译错误。

您可以将此类逗号分隔值定义为另一个变量，然后将其用作映射内的值

$family: -apple-system, BlinkMacSystemFont, 'Segoe UI';
$reboot: (
   'color': #000,
   'font-size': 16px,
   'font-weight': 400,
   'font-family': $family
 );

根据您的 SASS 版本，您可以选择使用map.get或map-get

body{
  font-family: map-get($reboot, "font-family");
  background: map-get($reboot, "color");
 }