css - 如何一次处理多个 SASS map ？

Question

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

在 SASS 中，可以定义一个映射，然后使用 at @each 根据映射的 key 和 value 生成类。但是，需要在 @each 中手动添加 css property。我想要一个可以添加该元素和一些基于 map 数据的命名约定的函数。因此，基于以下示例，我想动态添加 flex-direction，而不必为每个 map 创建 @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;
}

Answer 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) 中传递任意数量的映射。您只需对所有 map 调用一次，它就会创建您的所有类。

---

代码的 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)