从映射映射生成CSS属性的Sass mixin

Question

我有一张地图：

$colors: (
    'yellow': (
        '10': #fcf4d6,
        '20': #fddc69,
        '30': #f1c21b,
        '40': #d2a106,
        '50': #b28600,
        '60': #8e6a00,
        '70': #684e00,
        '80': #483700,
        '90': #302400,
        '100': #1c1500,
        'hover': (
            '10': #f8e6a0,
            '20': #fccd27,
            '30': #ddb00e,
            '40': #bc9005,
            '50': #9e7700,
            '60': #755800,
            '70': #806000,
            '80': #5c4600,
            '90': #3d2e00,
            '100': #332600
        )
    )
    ...

我的目标是使用一个混音，递归地将它转换为CSS属性。我觉得在任何其他语言中，这都很容易(也许我不太懂Sass)。

例如,

html {
  @include my-mixin($colors);
}

将翻译为：

html {
  --yellow-10: #fcf4d6;
  --yellow-20: #fddc69;
  ...
  --yellow-hover-10: #f8e6a0;
  ...
}

我只建立了财产名称：

@mixin define-css-properties($map, $name: "") {
  @each $key, $value in $map {
    @if is-map($value) {
      @include define-css-properties($value, $name + "-" + $key);
    } @else {
      --#{$name + "-" + $key}: red;
    }
  }
}

Answer 1

我解决了。

@mixin define-css-properties($map, $name: "", $valueAccum: null) {
  @each $key, $value in $map {
    @if is-map($value) {
      @include define-css-properties($value, $name + "-" + $key, map.get($value, $key));
    } @else {
      --#{$name + "-" + $key}: #{$value};
    }
  }
}

希望能听到反馈或者看到其他的选择。