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

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

0 голосов
/ 26 апреля 2018 
$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 Ответ

0 голосов
/ 26 апреля 2018

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

Ссылка на sassmeister

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

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

...