Harnessing The Power Of CSS Variables With JavaScript
Published: 2020-07-03 19:20:43

CSS Variables have been around for quite some time now and I have to say, it has been really helpful. Prior to the introduction of CSS variables, frontend developers might opt for CSS pre-processors like LESS, SASS and Stylus. But what exactly are CSS variables??

Just the way you declare variables in JavaScript, java, python or whatever language you code in, CSS variables is just that. It allows you to store values you would otherwise have to repeat throughout your code. This can be particularly painful when you're building a very large app.

## How does it work?

Quite simple actually. Say the primary color for your website is <code>#414FF6</code> and you want to save that color as a variable, here's how you'd go about it.
```css
--primary: #414FF6;
```

Pretty straightforward right? And just like variables in programming languages, CSS variables can also be scoped. To create a variable that would be accessible throughout your website, all you need to do is declare the variable within the <code>:root</code> block
```css
:root {
    --primary: #414FF6;
}
```
Likewise to make the variable local, you just need to add the variable within that CSS block. So declaring the <code>--primary</code> variable within a <code>.container</code> class and all elements under the <code>.container</code> element would be able to access the variable
```css
.container {
    --primary: #414FF6;
}
```

### Using CSS variables

Declaring CSS variables was quite easy, well using these variables is just as easy. To use the <code>--primary</code> variable code we declared earlier, all we need to do is wrap in <code>var()</code>. Here's how that would look.

```css
:root {
    --primary: #414FF6;
}

.btn-primary {
    background-color: var(--primary);
    color: #fff;
}
```
### Browser Fallback

While most major browsers support CSS variables, there are some browsers that don't. To fix that, we simple provide a fallback value for our variable. For example,

```css
.btn-primary {
    background-color: blue;
    background-color: var(--primary);
    color: #fff;
}
```
For browsers that support CSS variables, the color would be <code>#414FF6</code>, while browsers that don't support them would render a blue color.

Just like that, we've been able to declare and use our CSS variables. 

## Manipulating CSS variables in JavaScript
Now to the JavaScript part. When variables are declared in other CSS pre-processors, we usually don't have direct access to them (though there are workarounds), but With CSS variables, we have direct access to them in our JavaScript and we can easily manipulate the value of the variables using the <code>setProperty</code> method.
Here's a simple JavaScript snippet that changes the value of our <code>--primary</code> on button click.
```javascript
const root = document.documentElement;
const toggle = () => {
  root.style.setProperty('--primary', 'red');
}
```
In the first line, we're selecting the root element because our variable was declared within the <code>:root</code> block. If it was declared locally within the <code>.container</code> block, we'd simply select the element using <code>querySelector</code> or any other preferred selector of your choice.
The <code>toggle</code> function basically sets the <code>--primary</code> variable to red. So now our button, and any other element on the page that uses our variable should have the red color.

To get the value of a variable, there are two ways to go about that. Using the <code>getComputedStyle</code> or <code>style.getPropertyValue</code>
```javascript
const root = document.documentElement;
const value = root.style.getPropertyValue('--primary');
// or
const valueTwo = getComputedStyle(root).getPropertyValue('--primary') 
```

Here's a codepen link where I'm changing the background color of a circle on the click of a button using CSS variables.
{% codepen https://codepen.io/abdulqudus001/pen/XWXVaQK %}

And that's it. We've been able to create, use and manipulate CSS variables with JavaScript.
One thing to note though, CSS variables are case sensitive so <code>--primary-color</code> and <code>--Primary-Color</code> are two different variables.