Question

我有一个运行良好的SCSS函数，可以通过它调用任何颜色，如下所示：

color: clr(milk);

现在，我想在地图合并中进行某种循环，这样，例如当我添加带有其他颜色的称为“三级”的新嵌套地图时，这些颜色会自动变为可用状态，而无需添加

map-get(colors, 'tertiary')

到地图合并。有谁知道如何做到这一点？下面是我当前的功能：

$colors: (
    primary: (
        milk: #fff,
        cola: #000,
        mine-shaft: #232323,
    ),
    secondary: (
        pampas: #f4f1ef,
        pearl-brush: #e9e2dd,
        alto: #ddd,
    ),
);

// Color generation
@function clr($color) {
    $color: map-get(map-merge(map-get($colors, 'primary'), map-get($colors, 'secondary')), $color);

    @return $color;
}

Answer 1

好项目！ map-merge()确实可以用于实现您想要的目标，但是它增加了不必要的步骤。我建议只使用嵌套循环和@if语句。

@function clr($find) {
  @each $colorCategoryName, $colorCategory in $colors {
    @each $colorName, $color in $colorCategory {
      @if $find == $colorName {
        @return $color;
      }
    }
  }
}

例如：此...

$colors: (
  "primary": (
    "milk":       #fff,
    "cola":       #000,
    "mine-shaft": #232323,
  ),
  "secondary": (
    "pampas":      #f4f1ef,
    "pearl-brush": #e9e2dd,
    "alto":        #ddd,
  ),
);

@function clr($find) {
  @each $colorCategoryName, $colorCategory in $colors {
    @each $colorName, $color in $colorCategory {
      @if $find == $colorName {
        @return $color;
      }
    }
  }
}

body {
  color: clr(cola);
  background-color: clr(pampas);
}

将输出：

body {
  color: #000;
  background-color: #f4f1ef;
}

让我知道这是否不是您想要的东西！

SCSS-如何在地图合并中循环嵌套地图？

1 个答案: