时间戳

首页 > 解决方案 > SCSS – 如何从嵌套地图中获取特定值

css - SCSS – 如何从嵌套地图中获取特定值

问题描述

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

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

为了我的需要，我想从

 @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”变量的结果？

非常感谢。

标签： csssassfrontendbuefy

解决方案

密码笔

在这种情况下：

$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;
}

推荐阅读