Using SASS/SCSS to generate CSS variables

Question

I'm currently using SCSS to attempt to recreate a CSS block. The CSS block is as follows:

:root {
    --Franklin-Blue: #1d1c4d;
    --Light-Blue: #4e5d94;
    --Pale-Blue: #7289da;
    --Pure-White: #ffffff;
    --VLight-Grey: #99aab5;
    --Middle-Grey: #2c2f33;
    --Dark-Grey: #23272a;
    --body-color: #ffffff; 
    --text-color: #000000; 
    --bold-text: #000000; 
    --White-Blue: #ffffff; 
}

[data-theme="dark"] {
    --Franklin-Blue: #000000;
    --Light-Blue: #0d0d0d;
    --Pale-Blue: #2c2f33;
    --Pure-White: #ffffff;
    --VLight-Grey: #99aab5;
    --Middle-Grey: #2c2f33;
    --Dark-Grey: #23272a;
    --body-color: #000000;
    --text-color: #ffffff;
    --bold-text: #7289da;
    --White-Blue: #7289da;
}

So, I've started off by creating this SCSS map:

$themes: (
    dark: (
        'Franklin-Blue': #000000, 
        'Light-Blue': #0d0d0d,
        'Pale-Blue': #2c2f33,
        'Pure-White': #ffffff,
        'VLight-Grey': #99aab5,
        'Middle-Grey': #2c2f33,
        'Dark-Grey': #23272a, 
        'body-color': #000000,
        'text-color': #ffffff,
        'bold-text': #7289da,
        'White-Blue': #7289da
    ), 
    default:( 
        'Franklin-Blue': #1d1c4d, 
        'Light-Blue': #4e5d94,
        'Pale-Blue': #7289da, 
        'Pure-White': #ffffff,
        'VLight-Grey': #99aab5,
        'Middle-Grey': #2c2f33,
        'Dark-Grey': #23272a,
        'body-color': #ffffff,
        'text-color': #000000,
        'bold-text': #000000,
        'White-Blue': #ffffff 
    )
);

I've then created this mixin to cycle through that map and create the CSS variables from it:

@mixin theme() {
    @each $theme, $map in $themes {
        @if $theme == "default" {
            :root {
                @each $key, $value in $map {
                    #{--$key}: $value;
                }
            }
        }
        @else {
            [data-theme="#{$theme}" ] {
                @each $key, $value in $map {
                    #{--$key}: $value;
                }
            }
        }
    }
}

@include theme();

I can tell I'm along the right lines, but the CSS it creates is ever so slightly off - I end up with this:

[data-theme=dark] {
  -- Franklin-Blue: #000000;
  -- Light-Blue: #0d0d0d;
  -- Pale-Blue: #2c2f33;
  -- Pure-White: #ffffff;
  -- VLight-Grey: #99aab5;
  -- Middle-Grey: #2c2f33;
  -- Dark-Grey: #23272a;
  -- body-color: #000000;
  -- text-color: #ffffff;
  -- bold-text: #7289da;
  -- White-Blue: #7289da;
}

:root {
  -- Franklin-Blue: #1d1c4d;
  -- Light-Blue: #4e5d94;
  -- Pale-Blue: #7289da;
  -- Pure-White: #ffffff;
  -- VLight-Grey: #99aab5;
  -- Middle-Grey: #2c2f33;
  -- Dark-Grey: #23272a;
  -- body-color: #ffffff;
  -- text-color: #000000;
  -- bold-text: #000000;
  -- White-Blue: #ffffff;
}

How do I make sure the quotes appear in that attribute selector, as well as removing the whitespace from the CSS variables?

I know I need to move the default above the other theme to make the :root appear first, but I'm not sure how to fine tune the formatting.

Youssouf Oumar · Accepted Answer · 2022-08-27 08:34:45Z

To give a general overview, the syntax #{…} is called interpolation and it is the only way to inject dynamic values into a CSS variable (custom property). Here is a quote from the doc:

CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.

Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.

$primary: red;
:root {
  --primary: #{$primary}; // this one works
  --primary: $primary;    // this does not
}

The error you made is to put the -- inside the interpolation curly brackets ({}). This would work:

@mixin theme() {
  @each $theme, $map in $themes {
    @if $theme == "default" {
      :root {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    } @else {
      [data-theme="#{$theme}"] {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    }
  }
}

@include theme();

Collectives™ on Stack Overflow

Using SASS/SCSS to generate CSS variables

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related