Why in the world do do hex or rgb colors have to be so hard to remember? Not to mention how much of a pain it is to find and change them when you change your color scheme. CSS variables to the rescues! If you have never used CSS variables the time to start is now. They are widely supported across browsers and can make you styling a breeze.
What are --css variables
CSS variables are a way for you to assign certain css values to a keyword and reuse them throughout your application. CSS variables can have local or global scope and can be manipulated with JavaScript. Most often, they are used to help you manage your colors but you can use css variables many different ways. In the simplest form, a css variable is nothing but a keyword that has a value assigned to it.
Syntax
To declare and use a css variable is very simple. There are 3 main things you need to remember: -- :root var(). —- is used whenever you assign and declare your variable. To create a variable you must put —- in front of your variable name.
:root{
/* my variable name is main-color and my value associated with it is #5a9e4b */
--main-color: #5a9e4b;
}
:root is how you declare global scope. Scope is basically where all you can access your variable from. Global scope means you have access throughout your css file. You can create a local variable by using the —-variable-name inside of a class. A local variable means that you only have access to this variable locally inside that class.
/* This is declaring a global variable that I can access from anywhere in my css file. Anything inside of :root is global.*/
:root{
—-main-color: #5a9e4b;
}
/* This is declaring a local variable. I can only access this variable inside of this class */
.container {
--main-text-size: 24px;
font-size: var(--main-text-size);
}
var() is how you call your variables. Remember a variable is nothing but a keyword that has a set value. To pass this value to a css property all you have to do is type the name of your variable inside of the (). It’s that simple!
/* creating a global variable for main-color */
:root{
—-main-color: #5a9e4b;
}
/* passing the variable name into the var function. This will put #5a9e4b as the value to the color property. */
.someClass {
color: var(—-main-color);
}
Fallbacks
Unfortunately not all browsers are created equally. While most browsers are pretty robust its best practice to have some fallbacks in place. There is special syntax that you can use to have a fallback for your value. Its the same var() as before but you add a second argument. var(--main-color, blue); This will use your css variable --main-color and if it is invalid or not defined it will then make the value equal to blue. The var() only takes in two arguments and the second argument can be an additional css variable if you want. var(--main-color, var(--ultimate-fallback)); This will try to use main-color first and if its invalid will then use the --ultimate-fallback.
:root {
--main-color: #5a9e4b;
}
p {
/* will try --main-color first. If invalid will use blue */
color: var(--main-color, blue);
Now this will not act as a fall back for browsers that do not support css variables. To create a fallback for this is a little extra work but possible. CSS reads one line at at time. You can have the same property with two different values for the same class and css will use the last one written. We can take advantage of this with our variables. You can hard code your fallback in your css class and then on the next line add your css variable. Css will read each line and if the browser does not support css variables it will then default to your hard coded fallback. If the browser does support css variables then it will use it since it was used after the fallback.
:root {
--main-color: #5a9e4b;
}
p {
/* will use --main-color since it is last color property written. If invalid will then use blue.*/
color: blue;
color: var(--main-color);
Using JavaScript
Since css varaibles have access to the DOM you can change them with JavaScript! You can make some really interesting user interfaces with this trick. To start create your css variables like you normally would. Then use querySelector to get access to the root element. Now that you have access to the root element, all you have to do is use the setProperty() method to change the value of you variable. This will update the value and hence update your entire css file everywhere you used that variable. The setProperty() method is a method on CSSStyleDeclaration Object. I won’t go into detail on this or the other methods you can use. I want to keep this article light and focused on css varaibles instead of JavaScript. Go to https://www.w3schools.com/jsref/obj_cssstyledeclaration.asp If you would like to learn more about what you can do.
:root {
—-primary-color: #5a9e4b;
}
p {
color: var(—-primary-color);
}
//gives me access to the root element
let rootElement = document.querySelector(':root');
//this will change the style of my —-primary-color variable to red.
rootElement.style.setProperty('--primary-color', 'red');
In the above example I have a css variable called —-primary-color that is set to the value of #5a9e4b. Then I make the color to all of my <p> tags equal to my new variable. In the JavaScript section, I first create a variable that is equal to the root element. Then I can access my variable by using the setProperty('variable name', 'new value') method. The first argument is the variable name and the second argument is the new value. Now all my <p> will have red text!
You now have the knowledge needed to start using css varaibles in your applications. This will help increase developement speed, readability, and maintainability. If you enjoy this you can look into things like Sass to further extend your css capabilities.
Top comments (4)
The most elegant and concise yet deep post for css variables. And coincidentally I was indeed studying sass when I came across your article. This one is brilliant. Thanks for sharing!
Just a note, CSS Variables are technically known as CSS Custom properties.
And it's not just the name: They behave like properties too; there's not really a "scope" as in JavaScript; they are simply cascaded to child-elements.
And it's very interesting for me to use rgb in css variables just because it's easier to define rgba colors