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

У меня есть два вызова карт 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);
    }
  }
}

function css sass scss-mixins compass-sass
person Navidu Kunu    schedule 22.12.2018    source источник
comment
Вы хотите, чтобы миксин проверял, передавая в качестве аргумента карту, если в этой карте есть вызовы ключа map-1-color-1. Если есть, то вы хотите создать класс .my-class с color шестнадцатеричным числом map-1-color-1. Правильно ли я понял?   -  person ReSedano    schedule 22.12.2018
comment
да. Это то, что мне нужно. Я написал, что он использует такое @each условие. @each $key , $value in $my-map-1{ @if ($key == map-1-color-1){ .my-class{ @include color-mix($color:$value); } } } Но мне нужно сделать это с помощью функции.   -  person Navidu Kunu    schedule 22.12.2018

Ответы (1)


arrow_upward
1
arrow_downward

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

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

$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;
}
person ReSedano    schedule 22.12.2018
comment
Да! Это работает. Большое спасибо за вашу любезную поддержку. Надеюсь, ты тоже поможешь мне в следующий раз. Еще увидимся. Хорошего дня! - person Navidu Kunu; 22.12.2018
comment
Пожалуйста. Было приятно помочь вам! И тебе хорошего дня. :-) - person ReSedano; 22.12.2018