This article was originally published on my blog. Feel free to check it out
If you have used SASS or other CSS preprocessors, you might have already used Variables. CSS variables (also referred as custom properties) are the native implementation of them in the browser.
CSS variables need to be declared with --
prefix to the name.
:root {
--primary-color: #eaefed;
--text-color: #001100;
}
When we want to access them, we just need to use the var
function. The first argument of the var
function is the name of the variable. If the variable is invalid, we can pass the fallback value as the second argument.
.link {
border: 1px solid var(--primary-color);
color: var(--text-color, #111000);
/* if --text-color is invalid,fallback value #111000 is used */
}
Scope of the Variable
The scope of the CSS variable is the scope of the selector it is defined. For global scope, we can either declare them in :root
or body
selector.
For example, let's declare a variable named --btn-danger-color
in a class btn
. If you try to access the variable --btn-danger-color
in another class out of its scope, it will be invalid. Because the scope of --btn-danger-color
is only in btn
class
.btn {
--btn-danger-color: #FF4136;
background-color: var(--btn-danger-color);
}
.link {
background-color: var(--btn-danger-color, green);
/* Background color is green because --btn-danger is invalid */
}
Accessing and Modifying CSS Variables with JavaScript
To access or modify CSS variables via JavaScript, we can use two methods
- getPropertyValue
- setProperty
Getting the CSS Variable Value
To get the value of the CSS variable, we can use getPropertyValue
method
const btn = document.querySelector('.btn');
let btnDangerBg = getComputedStyle(element).getPropertyValue("--btn-danger-color");
console.log(btnDangerBg); // #FF4136 - value of the css variable defined in .btn class in CSS
To get the CSS variables declared in :root
, you can use document.querySelector(':root');
Changing the CSS Variable Value
To set the value of the CSS variable from JavaScript we can use setProperty
method.
element.style.setProperty("--variable-name", value)
Let's write a small function to change the Button
background colour to purple by using setProperty
method.
function changeColorToPurple(){
//Set the CSS variable value
btn.style.setProperty("--btn-danger-color", "purple")
}
Don't forget to link it with HTML.
<button class="btn" onclick="changeColorToPurple()">Change Color</button>
Demo
I'm adding an embedded repl for the above code So that you can play with it.
Thank You.
Reference
CSS custom properties - MDN
[Every thing you need to know about CSS variables](https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/)
Top comments (3)
Are css variables really that important to learn ? I don't see any reason to not use sass. Since I get to know sass I use it in my every project. What's your opinion on this?
The idea is for core CSS to standardize the SASS functionality so we won't need a preprocessor anymore. Variables was one reason why people used it, and eventually CSS will get mixins and logic too
Also with CSS Variables there is no setup required.