不显示SCSS调色板值

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

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

输出没有显示任何内容

编译后我对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));
}

---

好项目！要使其工作，您需要一个额外的循环

输出

.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));
}

---

@胡萨姆德夫，非常欢迎你。这对双方都是有益的

$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));
}