Создание имен классов из ключей карты источника

Question

Я получаю сообщение о том, что ('background-color': # 333) недопустимый css.Я пытаюсь получить название темы для добавления к .body - для каждой темы (пока есть только одна).Ошибка выглядит так, будто она пытается добавить содержимое имени темы в .body-- вместо простого заголовка.

$themes: (
    'dark': (
        'background-color': #333
    ),
);

@each $theme-name in $themes {
    .body--#{$theme-name} {
        & .container {
            background-color: map-get($theme-name, background-color);
        }
    }
}

Я пытаюсь получить:

.body--dark {}
.body--dark .container {background-color: #333}

Спасибо

Answer 1

Проблема в вашем @each утверждении.Вы получаете только значение карты вместо ключа и значения.

$themes: (
    'dark': (
        'background-color': #333
    ),
);

// get the key and the value in two separate variables: first variable is the key, second one the value
@each $theme-name, $theme-config in $themes {
    .body--#{$theme-name} {
        .container {
            background-color: map-get($theme-config, 'background-color');
        }
    }
}

Как примечание, вам не нужно & для вложенных селекторов.Это просто поведение по умолчанию.Используйте & только для псевдо-классов, объединенных имен классов, агрегированных имен классов и некоторых других странных селекторов.Проверьте мой ответ об этой заметке на этот другой вопрос .