如何分离scss函数返回值

Posted 2023-03-07

【中文标题】如何分离scss函数返回值

【英文标题】：How to separate scss function returned values

【发布时间】：2019-05-22 12:06:52

【问题描述】：

我有两个 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);
    
  

【问题讨论】：

你想要一个 mixin 来检查，作为参数传递一个映射，如果在那个映射中有一个键调用map-1-color-1。如果你想创建一个类.my-class 与color 的十六进制map-1-color-1。我理解正确吗？

是的。这就是我需要的。我使用这样的@each 条件编写它。 @each $key , $value in $my-map-1 @if ($key == map-1-color-1) .my-class @include color-mix($color:$value); 但我需要使用函数来完成。

【参考方案1】：

你可以使用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;

【讨论】：

是的！这是工作。非常感谢您的支持。希望你下次也能帮助我。再见。祝你有美好的一天！

不客气。很高兴为您提供帮助！也有美好的一天。 :-)