Передача нескольких аргументов в 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. Просто используйте тот, который вы хотите