sass - SCSS @mixin to generate css colour variables - Stack Overflow

admin管理员组

文章数量:1122832

I have an SCSS map for my theme colours that looks like this:

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

I have a @mixin that I am calling in my scss file:

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

When I call @include generateCssThemeVariables("dark"); I want the output of the mixin to look something like this:

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

At the moment I'm getting the following error from my 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};
   │             ^^^^^^^^^^^
   ╵

As you can probably guess I'm fairly new to SASS. I would guess that the problem is with the way I am using the @mixin and the scope of the variables in the @each statements. Can anyone can shed some light on to what is going wrong, is there something wrong with the way I have written the mixin?

I have an SCSS map for my theme colours that looks like this:

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

I have a @mixin that I am calling in my scss file:

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

When I call @include generateCssThemeVariables("dark"); I want the output of the mixin to look something like this:

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

At the moment I'm getting the following error from my 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};
   │             ^^^^^^^^^^^
   ╵

As you can probably guess I'm fairly new to SASS. I would guess that the problem is with the way I am using the @mixin and the scope of the variables in the @each statements. Can anyone can shed some light on to what is going wrong, is there something wrong with the way I have written the mixin?

• css
• sass
• scss-mixins

Share Improve this question Follow edited Nov 22, 2024 at 12:29 Dandelion asked Nov 22, 2024 at 11:20 DandelionDandelion 19511 silver badge99 bronze badges 2

• Is the problem that $colourType is a map list and not a value? – Dandelion Commented Nov 22, 2024 at 11:51
• If I remove $colourType from the css variable it throws the same error about $value! What am I doing wrong? – Dandelion Commented Nov 22, 2024 at 12:01

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You are trying to iterate over your nested map structure and the misunderstanding of how variables are being used within your loops. Your $theme-colours map is a nested structure, and you need to adjust your loop to navigate this nesting correctly so, try this solution:

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

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

@include generateCssThemeVariables(dark);

Okay I have solved this now. The working @mixin looks like this:

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

本文标签： sassSCSS mixin to generate css colour variablesStack Overflow