Вложенные переменные внутри переменной - PullRequest
Новая
       13

Вложенные переменные внутри переменной

0 голосов
/ 28 февраля 2020

Возможно ли как-то вложить несколько переменных в одну переменную? Приведенный ниже код не выдает ошибку, но я понятия не имею, как назвать внутренний «первый» или «второй» 

$themes: (
  light: (
    text: (
      first: black,
      second: grey
    ),
    button: blue
  ),
);

map_get, похоже, не работает, потому что он слишком глубоко вложен .

РЕДАКТИРОВАТЬ: Предоставленное решение Arkellys в основном работает. Проблема, которую я получил сейчас, заключается в том, что я хочу автоматизировать это с помощью простого вызова функции. Функция должна вызывать миксин, в котором темы должны стилизовать мои компоненты.

Миксин выглядит так: 

@mixin theme($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;
      $theme-map: null !global;
    }
  }
}

, а функция, которая вызывает миксин, выглядит так: 

@function theme($key) {
  @return map-get($theme-map, $key);
}

В моем s css я называю это так: 

.past {
  @include theme($themes) {
    color: theme('text-second');
  }
}

Так как мне определить, использую ли я простое вложение 1-го уровня или уже вложение 2-го уровня?

1 Ответ

1 голос
/ 28 февраля 2020

Да, это возможно, и для получения значения на вашей карте вы можете использовать @function, например this от Hu go Giraudel.

Например: 

@function getDeepMapValue($map, $keys...) {
   @each $key in $keys { $map: map-get($map, $key); }
   @return $map;
}

$themes: (
  light: (
    text: (
      first: black,
      second: grey
    )
  )
);

.class {
  color: getDeepMapValue($themes, light, text, first);
}

Вернет: 

.class {
  color: black;
}

Редактировать: Если я правильно понимаю ваш @mixin, выполнение чего-либо в этом направлении должно работать. Сначала отредактируйте @function theme для использования getDeepMapValue: 

@function theme($keys...) {
  @return getDeepMapValue($theme-map, $keys...);
}

А затем: 

.past {
  @include theme($themes) {
    color: theme(text, second); // grey
    background: theme(button); // blue
  }
}
...