SCSS - Как получить конкретное значение из вложенной карты

Я пытаюсь настроить что-то в 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?

Большое спасибо.


frontend css sass buefy
person Radek Homola    schedule 13.09.2020    source источник
comment
Вы не можете сохранить переменную на карте без значения. Например. white: #fff, вместо $white   -  person Simplicius    schedule 13.09.2020
comment
Значение определяется в моем файле, но не в этом стеке. Я определил его как белый цвет (#fff)   -  person Radek Homola    schedule 13.09.2020
comment
Собственно - это возвращает значение в таком формате: #fff, # 000 - мне нужен только первый   -  person Radek Homola    schedule 13.09.2020
comment
Если у меня есть еще один вопрос, прежде чем я смогу предоставить вам решение, почему карта вложена в карту, когда это может быть $colors: (white: ..., black: ...);?   -  person Simplicius    schedule 13.09.2020
comment
Это OOTB от Bulma, и его нельзя изменить. Например, под белый есть точный цвет и его инвертированный вариант (черный)   -  person Radek Homola    schedule 13.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

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;
}
person Simplicius    schedule 13.09.2020