How to handle THEMING with CSS global variables in SASS

In this article, we will explore how to create a dynamic and customizable theme for your website using CSS variables and SASS. By utilizing the power of SASS and CSS variables, we can easily change the look and feel of our site by simply adjusting a few variables.

We will cover the basics of setting up a theme using SASS and CSS variables, as well as some advanced techniques for creating a truly dynamic and customizable experience for your users.
So, whether you're a seasoned developer or just starting out, this article will provide you with the tools and knowledge you need to take your website's design to the next level.

Let's jump right into it, shall we?

Ok, but why would we want to use CSS variables in SASS, if we can simply create a SASS variables.
Well, once you'll create a SASS variables, they are closely binded to your app and your style sheets. Once you compile it, they are kind of gone so you can't easily apply any dynamic theming to your application.

What do I mean by that? If after compiling and deploying your app you'd like to change your theme via some external property, plugin or any third party JS code, you won't be able to do it with SASS variables.

Ok, but let me show you how it really looks.
Let's start of with setting up two CSS variables that we'll be working with:

:root {
    --color-primary: hsl(50 80% 44%);
    --button-size: 20px;
}

This will be our default theme.

And now let's use these variables in our SASS _variables.scss file via var keyword.

$primary-color: var(--color-primary);
$button-size: var (--button-size);

We just achieved a basic setup that allows us to externally modify the theme.
Here's a quick example:

const redTheme = {
    primaryColor: 'red',
    buttonSize: '12px'
};

export const setTheme(theme) {
    if (!theme) return;

    document.documentElement.style.setProperty("--color-primary", theme.primaryColor);
    document.documentElement.style.setProperty("--button-size", theme.buttonSize);
};

As you can see a simple JS function can modify the theme in the way you want. It can by done by you, your customer or any third party which will be working with your product at the later stage.

Is this a perfect solution?
Well, yes and no. Connecting CSS variables with SASS variables is pretty simple and easy to modify from the outside, but there's a cost.
The way how SASS translates var(--color-primary) unfortunately breaks the built in SASS functions like darken, lighten, alpha and so on.

There are however ways to handle this, but some effort is required. Most of them are really time consuming but there's one that is pretty simple which I'd like to show you.

What for instance SASS darken() does is, it transforms your color into HSL and then modifies the L which stands for lightness.

So if you know in advance, that you'll need a color-primary that is 10% darker, you can simply modify the L with calc(), subtract 10% and save that into CSS variable color-primary-dark. Like so:

:root {
    --color-primary: hsl(50 80% 44%);
    // let's create a variable that is 10% darker
    --color-primary-dark: hsl(50 80% calc(44% - 10%));
    --button-size: 20px;
}

and then add it into our SASS _variables.scss file

$primary-color: var(--color-primary);
$primary-color-dark: var(--color-primary-dark);
$button-size: var (--button-size);

That way our $primary-color-dark is basically equal to this darken($primary-color, 10%);

You can do the same for lightening the color.
Alpha is fairly simple to achieve since if you want to make it 50% transparent, you can change your regular hsl hsl(50 80% 44%) into hsla where a stands for alpha and set it to 50%: hsla(50 80% 44% / 50%).

Last but not least, what if we'd like to do any sorts of calculations? Well, calc() works without any issues so if you'd like to increase your button size by 10px, you can do this

$primary-color: var(--color-primary);
$button-size: var (--button-size);

.button-primary {
    background-color: $primary-color;
    width: calc($button-size + 10px);
}

As simple as that.

Conclusion

Using CSS variables in SASS provides a dynamic and customizable theme for your website. It is a simple and easy way to modify the theme from outside, but it does have its limitations. With a bit of effort, you can work around these limitations and achieve a truly dynamic and customizable experience for your users. With the techniques outlined in this tutorial, you will have the tools and knowledge to take your website's design to the next level.