SCSS – 如何从嵌套地图中获取特定值答案

【问题标题】：SCSS – How to get specific value from a nested mapSCSS – 如何从嵌套地图中获取特定值
【发布时间】：2020-12-31 08:18:44
【问题描述】：

我正在尝试在 Buefy/Bulma 中自定义一些东西，我需要从 SCSS 地图中获得一些价值。我有以下内容：

$colors:
   (
    "white": (
      $white,
      $black
    ),
    ...
  );

出于我的需要，我想从

获得第一个位置（仅 $white）

 @each $color in $colors {
  .button.is-#{nth($color, 1)}.pulse {
    position: relative;
    &::after {
      position: absolute;
      content: nth($color, 2); //This returns both colors
   ...

现在我得到了两个（$white，$black）。请帮忙——有没有办法只得到“$white”变量的结果？

非常感谢。

【问题讨论】：

您不能在没有值的情况下将变量存储在地图中。例如。 white: #fff, 而不是 $white
值在我的文件中定义，但不在此堆栈中。我将其定义为白色 (#fff)
实际上——这会以这种格式返回值：“#fff, #000”——我只需要第一个
如果在我为您提供解决方案之前还有其他问题，为什么地图中嵌套了一个地图，它可能是$colors: (white: ..., black: ...);？
这是 Bulma 的 OOTB，无法更改。例如下白色有确切的颜色及其反转变体（黑色）

标签： css sass frontend buefy

【解决方案1】：

Codepen

在这种情况下：

$white: #fff;
$black: #000;

$colors: (
  white: (
    $white,
    $black,
  ),
);

@function returnColor($value) {
  @return nth(map-get($colors, white), index(map-get($colors, white), $value));
}

body {
  color: returnColor($white);
}

如果有多个嵌套地图，那么：

$white: #fff;
$black: #000;

$red: red;
$invert: toLazy;

$colors: (
  white: (
    $white,
    $black,
  ),
  red: (
    $red,
    $invert,
  ),
);

@function returnColor($map, $value) {
  @return nth(map-get($colors, $map), index(map-get($colors, $map), $value));
}

body {
  background-color: returnColor(red, $invert);
  color: returnColor(white, $white);
}

body {
  background-color: toLazy;
  color: #fff;
}

【讨论】：