Using CSS Variables in SCSS Functions

Esma Aydogdu
Mar 30 · 3 min read

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:

We would like to serve a feature where users can edit a specific color by its darkness, lightness, or even hue, etc. which is used on the theme. We know that we should use variables to do that, and we know that only CSS variables are manipulable on the runtime with JavaScript. Also, to change the color’s properties, we need ‘functions’ because we have to calculate things with customer input.

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.

We will have a custom SCSS function that lightens a color, and we want this function to take a CSS variable as a parameter because after that it will be manipulated with JavaScript. Let's see how we are going to call this function:

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.

Beyn Technology

Beyn Technology Tech Team

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store