Как отделить возвращаемые значения функции scss - PullRequest
Новая
       6

Как отделить возвращаемые значения функции scss

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

У меня есть две карты SCSS, звоните $my-map-1 и $my-map-2.Каждая карта имеет ключи с шестнадцатеричным значением.Я написал функцию для возврата ключа и шестнадцатеричных значений ($key, $value) каждой карты отдельно.

После этого я написал условие @if с моей функцией для проверки карты.Я передаю имя моей карты в функцию.Если карта там, проверка $key равна заданному имени.Если это правда, передайте $valu этого $key моему смешиванию цветов.Это мой код. 

$my-map-1: (
        map-1-color-1: #506c89,
        map-1-color-2: #737373,
        map-1-color-3: #2a3949,
        map-1-color-4: #182028,
);

$my-map-2: (
        map-2-color-1: #fff,
        map-2-color-2: #000,
        map-2-color-3: #ddd,
        map-2-color-4: #ccc,
);

//the function to read te map and return the key and the value.
@function color-map($color-map) {
  @each $key, $value in $color-map {    
    @return ($key, $value);
  }
}

//mixin
@mixin color-mix($color){
  color: $color;
}

//css classes from here
@if color-map($my-map-1) {
  if($key == map-1-color-1) {
    .my-class{
      @include color-mix($color:$value);
    }
  }
}

1 Ответ

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

Вы можете использовать map-get метод, он очень полезен: http://sass -lang.com / Документация / Sass / Script / Functions.html # map_get-instance_method

Этоэто пример mixin.Я передаю в качестве аргумента и ваш ключ: может быть, лучше, потому что вы можете проверить и другие ключи, если вам это нужно: 

$my-map-1: (
  map-1-color-1: #506c89,
  map-1-color-2: #737373,
  map-1-color-3: #2a3949,
  map-1-color-4: #182028
);

$my-map-2: (
  map-2-color-1: #fff,
  map-2-color-2: #000,
  map-2-color-3: #ddd,
  map-2-color-4: #ccc
);


@mixin color-map($color-map, $key-map) {
  @each $key, $value in $color-map {    
    @if($key == $key-map) {
      .my-class{
        color: map-get($color-map, $key);
      }
    }
  }
}

@include color-map($my-map-1, map-1-color-1);

Ваш вывод будет: 

.my-class {
  color: #506c89;
}
...