Convert Sass variables to CSS variables

We all know how are variables important. They are everywhere. JavaScript, C#, Java, Python… Should I continue? CSS has them too! Introduced in 2012. There are however enormous differences between Sass and CSS variables.

Syntax

:root {
  --color-primary: hsl(44, 80%, 100%);
}
a {
  color: var(--color-primary);
}

C’mon, that’s ugly! I don’t want to write this every time I use a variable. That’s why I use Sass right? Well, sort of. Here’s the catch.

Dynamics

All variables defined in CSS can be changed in runtime through JavaScript.

document.querySelector(':root').style.setProperty('--color-primary', 'hsl(280, 60%, 40%)')

But Sass variables are not dynamic. What a shame! This could bring you opportunities like super-easy Dark mode.

It turns out that there is a possibility to have dynamic Sass variables. The implementation shouldn’t be that hard. Just compile $primary to var(--primary) and CSS will do the work for us! Honestly, it seems that I wasn’t the first to have this idea. Sass-to-css-variables have already implemented that; however, I’m not sure about this project as it has been updated 4 years ago. A Sass function mentioned in this article could also solve the problem, but I would be much happier if this feature was simply integrated. It would help so many people.

See how many articles lacking this feature have been written. Google is full of them.

• How to create a dark mode in sass by Katie McTigue

  I don’t know if this speaks to my inability to understand Sass, or to Sass’s inability to anticipate developer needs, but the fact is Sass compiles to good ole css — it’s a preprocessor and not a full-fledged language. Therefore it can’t just swap all your variables on the fly after it is already compiled.

  Well, it turns out it can! And I’m full of hope.

• Dark Mode with Sass and CSS variables by Francesco Improta

  Implementing dark mode with Sass is hard because it is a preprocessor language. Any changes implies a new generating process and a page refresh. Therefore it is impossible to switch from light to dark - or the way around - in real time

  Not true from now on. Hopefully…

• Add dark mode support on your website with SASS by Fabrizio Duroni

  He did it too, but the longest way possible.

[mirisuzanne]

Sadly, there is not any way to “make Sass variables dynamic”, because Sass itself is pre-compiled, while CSS is interpreted by the browser (dynamically) at runtime. That’s not an oversight, or a mistake – only the browser engine can handle the dynamic interactions required.

CSS Custom Properties are dynamic because they are computed at runtime by the browser, just like any other CSS property, with full knowledge of the DOM, Cascading, & Inheritance. Sass has no access to the DOM, and no way to manage that cascade or inheritance. CSS Custom properties & Sass variables are fundamentally different, in a way that can’t be merged…

But it’s true that converting Sass variables into CSS custom properties can be very useful, and there are a lot of great approaches for doing it. If you want them set on the root (html), I recommend using loops on all the variables in a module, so you don’t have to write it out one variable at a time. Here’s some code to output both dark and light-mode variables:

@use 'path/to/my/darkmode';
@use 'path/to/my/lightmode';
@use 'sass:meta';

html {
  @each $name, $value in meta.module-variables("lightmode") {
    --#{$name}: #{$value};
  }

  @media (prefers-color-scheme: dark) {
    @each $name, $value in meta.module-variables("darkmode") {
      --#{$name}: #{$value};
    }
  }
}

[DungGramer]

I create a mixin for this solution. Check it out!

@mixin add-css-variables($module) {
    :root {
     @each $name, $value in $module {
       --#{$name}: #{$value};
     }
    }
 }
 
 @use "sass:meta";
 @use "colors.scss" as colors;
 $colors: meta.module-variables('colors');

// Usages
 @include add-css-variables($colors);