Передача нескольких аргументов в SASS Mixin для вывода набора классов или одного класса

$base-space: 1rem !default;

$space-map : (
    '1o9': $base-space,
    '1o8': $base-space/8,
    '1o4': $base-space/4,
    '1o2': $base-space/2,
) !default;

@mixin containers($new-space-map) {

    @each $name, $value in $new-space-map {

        .container--#{$name}{
            margin: $value 0;
        }
    }
}

@include containers($space-map);

Это выводит 4 CSS-класса.

Я пытаюсь сгенерировать все 4 класса или только один класс на основе имени, которое я передаю в качестве аргумента.

мой вывод должен быть:

.container--1o9 {
  margin: 1rem 0;
}

.container--1o8 {
  margin: 0.125rem 0;
}

.container--1o4 {
  margin: 0.25rem 0;
}

.container--1o2 {
  margin: 0.5rem 0;
}

Или же

.container--1o2 {
  margin: 0.5rem 0;
}

на основании аргумента, который я передаю.

Объяснить дальше; Я пытаюсь использовать @include на той же карте SASS обоими способами, указанными ниже, в зависимости от моих потребностей:

@include containers(<SASS map file>); //This I achieved

или же

@include containers(<any key from SASS Map>); //This I cant

Я застрял здесь и не уверен, достижимо ли это или нет. Любая помощь будет очень ценится.

1 ответ

Решение

Удалить! По умолчанию. Это будет работать так, как вы ожидаете

Ссылка на Сассмейстера

https://www.sassmeister.com/gist/2839eaf64bd441e73a92aed6bb980465

Помните, что все 4 класса компилируются в ваш файл CSS. Просто используйте тот, который вы хотите

Другие вопросы по тегам