Sass 映射中的访问键、值

Question

我有以下 Sass 地图：

$font-scale: (
  0: (12, 16),
  1: (14, 16),
  2: (16, 20),
  3: (18, 20),
  4: (20, 24),
  5: (24, 28),
  6: (28, 32),
  7: (32, 32),
  8: (40, 40),
  9: (48, 48)
);

我想为每个项目生成字体大小和行高 CSS 变量。以下是我用来生成的内容：

:root {
 @each $name, $value in $font-scale {
   --font-size-scale-#{$name}: #{$value};
   --line-height-#{$name}: #{$value};
 }
}

以下是我得到的：

--font-size-scale-0: 12,16;
--line-height-0: 12,16;
--font-size-scale-1: 14,16;
--line-height-1: 14,16;

相反，我想得到以下内容：

--font-size-scale-0: 12;
--line-height-0: 16;
--font-size-scale-1: 14;
--line-height-1: 16;

如何访问每个值 ((12, 16)) 日期并将其分配给变量？

Answer 1

您可以使用 nth 函数来完成，如下所示：

:root {
  @each $name, $value in $font-scale {
    --font-size-scale-#{$name}: #{nth($value,1)};
    --line-height-#{$name}: #{nth($value,2)};
  }
 }

Sass 映射中的访问键、值

Access Key, Value in Sass Map

css

sass