Question 416088 in CSS Question posted in
Some basic documentation can be found here.

SCSS @mixin to generate css colour variables

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search