如何一次处理多个 SASS 映射？答案

【问题标题】：How to process multiple SASS maps at once?如何一次处理多个 SASS 映射？
【发布时间】：2020-01-24 23:41:36
【问题描述】：

我正在尝试动态创建实用程序类。

在 SASS 中，可以定义一个映射，然后使用 @each 根据映射的 key 和 value 生成类。但是，css property 需要在 @each 中手动添加。我想要一个可以根据地图数据添加该元素和一些命名约定的函数。所以，根据下面的例子，我想动态添加flex-direction，而不是为每个地图创建一个@each。

什么有效：

//Example Map
@flex-wrap: ("nw": "no-wrap", "w": "wrap", "wr": "wrap-reverse")

//Example @each
@each $name, $value in $flex-wrap
    .flx-w-#{$name}
        flex-direction: #{$value}

我需要什么：

.flx + $prefix + $name
    $property: $value

以及预期的 css 编译结果：

.flx-d-w {
    flex-direction: wrap;
}

【问题讨论】：

标签： css function sass flexbox maps

【解决方案1】：

一种动态的方法是使用嵌套映射、两个@each 循环和一个mixin。

$flex-direction: (
  "name": "flex-direction",
  "prefix": "flx-d",
  "values": (
    "r": "row",
    "c": "column",
    "rr": "row-reverse",
    "cr": "column-reverse"
  )
);

$flex-wrap: (
  "name": "flex-wrap",
  "prefix": "flx-w",
  "values": (
    "nw": "nowrap",
    "w": "wrap",
    "wr": "wrap-reverse"
  )
);

@mixin createClasses($maps...) {
  @each $map in $maps {
    $propertyName: map-get($map, "name");
    $propertyPrefix: map-get($map, "prefix");

    @each $value, $key in map-get($map, "values") {
      .#{$propertyPrefix}-#{$value} {
        #{$propertyName}: #{$key};
      }
    }
  }
}

@include createClasses($flex-direction, $flex-wrap);

通过上面的例子你会得到：

.flx-d-r {
  flex-direction: row;
}

.flx-d-c {
  flex-direction: column;
}

.flx-d-rr {
  flex-direction: row-reverse;
}

.flx-d-rc {
  flex-direction: column-reverse;
}

.flx-w-nw {
  flex-wrap: nowrap;
}

.flx-w-w {
  flex-wrap: wrap;
}

.flx-w-wr {
  flex-wrap: wrap-reverse;
}

这里的“神奇”部分是使用扩展 ... 运算符在 mixin (documentation here) 中传递您想要的任意数量的映射。您只需对所有地图调用一次，它就会创建您的所有类。

SASS版本的代码：

$flex-direction: ("name": "flex-direction", "prefix": "flx-d", "values": ("r": "row", "c": "column", "rr": "row-reverse", "cr": "column-reverse"))
$flex-wrap: ("name": "flex-wrap", "prefix": "flx-w", "values": ("nw": "nowrap", "w": "wrap", "wr": "wrap-reverse"))

=createClasses($maps...)
  @each $map in $maps
    $propertyName: map-get($map, "name")
    $propertyPrefix: map-get($map, "prefix")
    @each $value, $key in map-get($map, "values")
      .#{$propertyPrefix}-#{$value}
        #{$propertyName}: #{$key}

+createClasses($flex-direction, $flex-wrap)

【讨论】：

谢谢！这解决了我一直在努力解决的@each 部分，但是否可以将其插入一个处理我所有地图的函数中，因此不必为每个地图编写@each？
@Evenheavy 你的意思是另一个地图而不是 flex 属性？
我最终想为多种事物创建实用程序类。填充、边距、动画等。Flex 只是其中的一部分。我知道map-merge，会有帮助吗？另外，不用担心用sass写例子，scss就可以了。
@Evenheavy 好的，我在上面，您更喜欢嵌套地图（$flexProperties）还是单独地图中的每个属性（$flex-wrap、$flex-direction...）？
如果可能的话，我希望每个部分，例如flex-wrap、flex-direction，在他们自己的地图中。我只需要了解语法和逻辑。我是 SASS 新手。