SCSS 调色板值未显示

Question

我想使用 SCSS 构建一个颜色实用程序，但编译后它没有显示任何内容。

我创建此要点以获取更多信息：Gist Here

$colors: (
  "gray": (
    "gray-50": (
      "--color-opacity": 1,
      "color1": #FFF3E0,
      "color2": (rgba(250, 250, 250, var(--color-opacity)))
     ),
    "gray-100": (
      "--color-opacity": 1,
      "color1": #FFCC80,
      "color2": (rgba(200, 200, 200, var(--color-opacity)))
     )
  ),
) !default;

@each $color-name, $shades in $colors {
  @each $shade, $color in $shades { 
    @if ($shade) == "gray" / "gray-50" {
      .#{$shade} {
        #{--color-opacity}: map-get(map-get($shades, "gray", "gray-50"), --color-opacity);
        color: map-get(map-get($colors, map-get($shades, "gray", "gray-50")), color1);
        color: map-get(map-get($colors, map-get($shades, "gray", "gray-50")), color2);
      }
    }
  }

输出什么也不显示。

编译后我的 CSS 文件中的预期内容：

.gray-50 {
  --color-opacity: 1;
  color: #FFF3E0;
  color: rgba(250, 250, 250, var(--color-opacity));
}

.gray-100 {
  --color-opacity: 1;
  color: #FFCC80;
  color: rgba(200, 200, 200, var(--color-opacity));
}

Answer 1

不错的项目！要让它工作，你需要一个额外的循环。Codepen。

$colors: (
  "gray": (
    50: (
      "opacity": 1,
      "hex": "#FFF3E0",
      "rgba": "rgba(250, 250, 250, var(--opacity))",
    ),
    100: (
      "opacity": 1,
      "hex": "#FFCC80",
      "rgba": "rgba(200, 200, 200, var(--opacity))", 
    ),
  ),
) !default;

// loop through each "color-name", e.g. `gray` etc. and its "shades"
@each $color-name, $shades in $colors {
  // loop through each individual "shade", e.g. `50`, `100` etc. and its "color-specs"
  @each $shade, $color-specs in $shades {
    // create class
    .#{$color-name}-#{$shade} {
      // [inside class] loop through each individual "property" and its "value"
      @each $property, $value in $color-specs {
        // if "property" is equal to `"opacity"`, then...
        @if ($property == "opacity") {
          --#{$property}: #{$value};
        } @else {
          // else ....
          color: #{$value};
        }
      }
    } 
  }
}

输出

.gray-50 {
  --opacity: 1;
  color: #FFF3E0;
  color: rgba(250, 250, 250, var(--opacity));
}

.gray-100 {
  --opacity: 1;
  color: #FFCC80;
  color: rgba(200, 200, 200, var(--opacity));
}