SCSS @mixin 生成 css 颜色变量

Question

我的主题颜色有一个 SCSS 贴图，如下所示：

$theme-colours: (
  dark: (
    primary: (
      light: #32303b,
      base: #32303b,
      dark: #32303b,
    ),
    secondary: (
      light: #201f26,
      base: #201f26,
      dark: #201f26,
    ),
  ),
  light: (
    primary: (
      light: #32303b,
      base: #32303b,
      dark: #32303b,
    ),
    secondary: (
      light: #201f26,
      base: #201f26,
      dark: #201f26,
    ),
  ),
);

我在我的 scss 文件中调用了一个

@mixin

：

@mixin generateCssThemeVariables($themeName) {
  @each $theme, $colourType in $theme-colours {
    @if $theme == $themeName {
      @each $variation, $value in $colourType {
        --#{$colourType}-colour-#{$variation}: #{$value};
      }
    }
  }
}

当我调用

@include generateCssThemeVariables("dark");

时，我希望 mixin 的输出看起来像这样：

--primary-colour-light: #32303b;
--primary-colour-base: #32303b;
--primary-colour-dark: #32303b;
--secondary-colour-light: #201f26;
--secondary-colour-base: #201f26;
--secondary-colour-dark: #201f26;

目前我的 mixin 出现以下错误：

   (primary: light: #32303b, base: #32303b, dark: #32303b),
   secondary: (light: #201f26, base: #201f26, dark: #201f26))
   isn't a valid CSS value.
   ╷
   │         --#{$colourType}-colour-#{$variation}: #{$value};
   │             ^^^^^^^^^^^
   ╵

你可能猜到我对 SASS 相当陌生。我猜想问题出在我使用

@mixin

的方式以及

@each

语句中变量的范围。任何人都可以阐明出了什么问题吗？我编写 mixin 的方式有问题吗？

Answer 1

好的，我现在已经解决了这个问题。工作的

@mixin

看起来像这样：

@mixin generateCssThemeVariables($themeName) {
  @each $themeArray, $colourType in $theme-colours {
    @if $themeArray == $themeName {
      @each $colourType, $variationArray in $colourType {
        @each $variation, $value in $variationArray {
          --#{$colourType}-colour-#{$variation}: #{$value};
        }
      }
    }
  }
}