如何分隔scss函数的返回值 [英] How to separate scss function returned values

问题描述

我有两个SCSS映射，分别称为 $ my-map-1 和 $ my-map-2 。每个映射都有其十六进制值的键。我编写了一个函数，分别返回每个地图的键和十六进制值（ $ key ， $ value ）。

I have two SCSS maps call $my-map-1 and $my-map-2. Each map has the keys with their hex value. I wrote a function to return the key and the hex values ($key, $value) of each map separately.

此后，我编写了一个 @if 条件，该函数用于检查地图。我将地图名称传递给函数。如果有地图，请检查 $ key 是否等于给定名称。如果是这样，请将那个 $ key 的 $ value 传递给我的颜色混合。这是我的代码。

After that, I wrote a @if condition with my function to check the map. I pass my map name to the function. If map there, check is the $key equal to the given name. If that true, pass the $valu of that $key to my color mixin. This is my code.

$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);
    }
  }
}

推荐答案

您可以使用 map-get 方法，它非常有用： http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method

You can use map-get method, it is very useful: http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method

这是mixin的示例。我也将您的密钥作为参数传递：也许更好，因为如果需要，您还可以检查其他密钥名称：

This is an example of mixin. I pass as argument also your key: maybe it is better because you can check also others key names, if you need it:

$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;
}

这篇关于如何分隔scss函数的返回值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！