嵌套sass映射的循环问题

Question

我有一张简单的彩色sass地图。我循环通过它并生成css vars。到目前为止效果很好。

$colors: (
  primary: red,
  secondary: blue,
)

@each $color, $value in $colors {
    --#{$color}: #{$value};
}

然后我用主题扩展了这张地图。在那里，我再次循环每个主题并创建css vars。这也很好用。

$colors2: (
  theme-1: (
    primary: red,
    secondary: blue,
  ),
  theme-2: (
    primary: yellow,
    secondary: pink,
  )
)

@each $theme, $colors in $colors2 {
    &[data-theme="#{$theme}"] {
        @each $color, $value in $colors {
            --#{$color}: #{$value};
        }
    }
}

但现在我需要找到一种将两者结合起来的方法。不幸的是，到目前为止，我还没有找到一种方法来循环下面的列表，创建单个css vars和数据属性+ css vars。

$colors3: (
  primary: green,
  secondary: purple,
  theme-1: (
    primary: red,
    secondary: blue,
  ),
  theme-2: (
    primary: yellow,
    secondary: pink,
  )
)

你们中有人知道我是怎么做到的吗？最后，像这样的事情应该会出现：

:root {
  --color-primary: green;
  --color-secondary: purple;

  &[data-theme="theme-1"] {
  --color-primary: red;
  --color-secondary: blue;
  }
  &[data-theme="theme-2"] {
  --color-primary: yellow;
  --color-secondary: pink;
  }
 }

非常感谢您的帮助！

亲切问候马可

Answer 1

我找到了一个让它开始工作的方法:)

这是我的解决方案，以防万一，别人需要它。

:root {
    @each $key, $value in $colors {
        @if type-of($value) == map {
            &[data-theme="#{$key}"] {
                @each $theme-key, $theme-value in $value {
                    --color-#{$theme-key}: #{$theme-value};
                }
            }
        } @else {
            --color-#{$key}: #{$value};
        }
    }
}