HR management platform
Subscribe to our Newsletter!
Thank you! You are subscribed to our blogs!
Oops! Something went wrong. Please try again.
Theming in SASS: CSS variables

Theming in SASS: CSS variables

Kaushik
August 5, 2022
2
mins

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 variable 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 variable. 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 variable 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:-

https://www.toptal.com/sass/theming-scss-tutorial#:~:text=When%20it%20comes%20to%20theming,a%20plane%20instead%20of%20walking

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 :)

See our award-winning HR Software in action

Schedule a demo
Blogs related to "
Theming in SASS: CSS variables
"
No items found.

Leave a reply

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sneha

October 25, 2021

A very inspiring list. Thanks for putting this together

Vanessa

October 25, 2021

This is such a great list of women leaders! More power to you all

Contact Us!

Get a personalized demo with our experts to get you started
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Schedule a Demo !

Get a personalized demo with our experts to get you started
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.