In Beyn Technology, we are usually dealing with rather complex UI and UX problems, and we need to cover them in clever ways in order to display tons of precious data to the user. Also, we are trying to get a point where we could play with the themes without ever touching the code. To do that, we should go a little deeper about CSS and SCSS (or any other preprocessor scripting language)
We are all gladly using SCSS and benefiting from its features. In addition to that, we didn’t want to give up on CSS variables, because they are strong, especially when it comes to changing them in run-time, it can’t be achieved using SCSS, SASS, or LESS variables. Because SCSS, SASS, etc, they are CSS preprocessors which means all of their specific features are disappearing when it gets compiled to CSS.
Let’s make our point clearer by constructing an actual scene:
This brings us to a point where we should use CSS variables and SCSS functions. Let’s see what is going to happen if we try this:
and the problem:
The reason we are receiving this error is that compiler expects an SCSS variable as a parameter in the SCSS specific function, but receives a different syntax and doesn’t recognize it.
Here we should welcome the term ‘string interpolation’. This can be used anywhere in the SCSS stylesheet to embed the result as a pure CSS chunk and lets the browser handle it. We are going to trick the CSS using string interpolation and treat this input as a plain string.
Let’s begin to do this, declaring CSS variables:
Here we separated the color into its hue, saturation, and lightness components because e.g., changing the lightness value is enough for us to play with the lightness of the color. It would be more complicated to do it with hexadecimal or RGB values.
And surely there is repetition, but we will not be dealing with this right now.
To make this work without the compilation error placed above, we should start to play with interpolation, and treat this CSS variable as plain text.
Let’s take a final look at our SCSS custom function:
This function changes the lightness component of the color by the given input value.
I’ve also added a function to control the hue, and this will allow us to play with the hue and lightness of the same color
This the total idea in action:
Imagine if your project has a beautiful theme and it is wisely constructed with various color variables so you can let your customer play with it in a safe way, or even the team can just land a new safe theme without breaking anything.
This was an eye-opening approach for me and could be very useful in SCSS written codebases to add more power to it via CSS variables.