Как узнать, сколько аргументов переменной я передал в своей функции, используя SCSS - PullRequest
Новая
       5

Как узнать, сколько аргументов переменной я передал в своей функции, используя SCSS

0 голосов
/ 05 декабря 2018

У меня трудности с пониманием аргумента переменной SCSS.как показано здесь , довольно легко понять, что вы можете добавить более одного аргумента.

Но я не понимаю, как я могу сделать это с помощью Карт.

Например:

У меня есть эта карта: 

$spacing: (
    none: 0px,
    micro: 2px,
    tiny: 4px,
);

ИЯ пишу функцию для управления интервалом: (Скорее всего, это супер неправильно) 

@function spacing($value...) {
   $chosen-spacing: null;
   @if length($value) == 1 {
        @if map-has-key($spacing, $value) {
            @return map-get($spacing, $value);
        }@else {
            @error "'#{$value}' doesn't exist in 'spacing map'";
            @return null;
        }
    }@else {
        @each $v in $value {
            @if map-has-key($spacing, $value) {
                $chosen-spacing: map-get($spacing, $value);
            }@else {
                @error "'#{$value}' doesn't exist in 'spacing map'";
                @return null;
            }
        }
        @return $chosen-spacing;
    }   
}

Я хочу иметь возможность вызывать функцию как: 

.blabla {
  padding: spacing(none);
  margin: spacing (micro, tiny);
}

И выводбыть: 

.blabla {
  padding: 0px; 
  margin: 2px 4px; 
}

Без карты это можно сделать легко, но с помощью карты, как я могу это сделать?

Спасибо

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Вы можете использовать append с одной петлей. 

$spacing: (
    none: 0px,
    micro: 2px,
    tiny: 4px,
);

@function spacing($value...) {
  $chosen-spacing: null;

  @each $v in $value {
      @if map-has-key($spacing, $v) {
          $chosen-spacing: append($chosen-spacing , map-get($spacing, $v));
      }@else {
          @error "'#{$value}' doesn't exist in 'spacing map'";
          @return null;
      }
  }
  @return $chosen-spacing;
}

.blabla {
  padding: spacing(none);
  margin: spacing(micro, tiny);
}

Это вывод: 

.blabla {
  padding: 0px; 
  margin: 2px 4px; 
}
0 голосов
/ 05 декабря 2018

Вот как вы можете это сделать: 

@function spacing($value...) {
  $chosen-spacing: null;

  @each $v in $value {
     @if($chosen-spacing) {
        $chosen-spacing: #{$chosen-spacing + ' '}
     };

     @if map-has-key($spacing, $v) {
        $chosen-spacing: #{$chosen-spacing + map-get($spacing, $v)};
     } @else {
        @error "'#{$v}' doesn't exist in 'spacing map'";
        @return null;
     }
  }

  @return $chosen-spacing;
}

Вам не нужно проверять длину, достаточно простого цикла.

Цикл будет читать все параметры и добавлятьзначение, полученное из карты в переменную $chosen-spacing.Первый @if проверяет, имеет ли переменная значение, если это так, это означает, что нам нужно добавить пробел перед добавлением следующего значения (поэтому мы не получаем 2px4px).

...