Theming in SASS: CSS variables

Sass is a CSS preprocessor and an extension to CSS. So whatever we define in the Sass file, on the browser level gets converted to CSS.

After doing my research I found that if any product has a requirement of theming the developer should go with CSS, not Sass. With Sass, they are some disadvantages which I will discuss later.

Theming in Sass works similar to CSS:- First, we need to define the CSS variables in the (: root)

:root {

- -background: #FFA69E;

- -text-color: #0F0F0F;

}

So here root is a pseudo-class that selects the document’s root element. A pseudo-class is used to define a special state of an element. So these variables must be defined at your app's top level. Once we define these variables we can use these CSS variables in Sass files or different Sass variables with the help of var() function which is used to insert the value of a CSS variables. eg:

body { background-color: var(- -background); }

$xyz : var(- -text-color );

Through this, we can achieve theming in Sass, but there is a disadvantage with Sass:
— Sass has mixin functions like lighten(color, x%) and darken(color, x%), so these mixins don’t accept CSS variables, these mixins need exact hex code to work.
— So if you are using bootstrap Sass from the library then you need to make the whole bootstrap Sass file committable and find an alternative to the mixin functions (lighten and darken).

Once we define and set the CSS variables we can change the value of these CSS variables through DOM manipulation eg-:

document.documentElement.style.setProperty(‘- -blue’, ‘#89CFF0’);

On the button click, I am doing DOM manipulation and changing the background color. Anyway, DOM manipulation is an expensive process. If your application is very big or very dynamic, the time spent manipulating DOM elements rapidly adds up and you may have performance issues in your app.

Alternative to this we can write our own mixin functions and we can add themes to the app.

Here is the link to the blog:- Theming with Sass: An SCSS Tutorial

But if an app is already big then writing your own mixin function will be pretty tedious work because you need to call the mixin function from every file.

Happy learning :)is