如何分隔scss函数的返回值

时间:2018-12-22 09:44:16

标签: css3 function sass compass-sass scss-mixins

我有两个名为$my-map-1$my-map-2的SCSS映射。每个映射都有其十六进制值的键。我编写了一个函数,分别返回每个映射的键和十六进制值($key$value)。

在那之后,我用函数写了一个@if条件来检查地图。我将地图名称传递给函数。如果有映射,请检查$key是否等于给定名称。如果是这样,请将那个$valu的{​​{1}}传递给我的混色。这是我的代码。

$key

1 个答案:

答案 0 :(得分:1)

您可以使用map-get方法,这非常有用:http://sass-lang.com/documentation/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;
}