Even though CSS Variables aka Custom Properties have been more than usable for 3-4 years now, not everyone knows about them or uses them.
They are a great addition to CSS. One of the best since CSS 3. A lot of new features are coming and are announcing a great time for CSS again!
I will write a short series about them and we will go deeper into their use.
How do they work?
Looking at this picture, you will notice 3 things:
Top level / Root level
CSS Variables are declared at root level. It's not an obligation and we are going to explore it but it became the standard approach.
:root {
--main-bg-color: grey;
--font-family: 'Overpass', sans-serif;
--font-medium: 16px;
}
How to declare and use them
We declare them with double hyphen -- and a name as we would do in a SASS variable :
--main-bg-color vs $main-bg-color
You add a value to them. Could be font-family, font-size, spacings, url images, ...
--name: value;
The use of the var() function
To read them, we will use the var() function and add two things:
- The first one is the variable itself
var(--main-bg-color)
- The second one is a default value if the variable is not defined:
var(--main-bg-color, lightgrey)
If --main-bg-color doesn't exist, the color by default will be lightgrey
What are the benefits of using them?
✅ They are easy to write, to use and to maintain. They are reusable in all your CSS files. Super useful when working with components and shared properties/values.
🚀 They can be changed at local scope. I will cover it in the next article, be there!
⚙️ They are accessible at runtime. You can change one variable in your browser to see how it affects your design. Impossible with build time preprocessors. And are accessible by JavaScript: we can create them with JavaScript, use them or change them.
🔲 🔳 When working with dark/light mode or multiple themes in CSS, they are perfect. I will add an example and comparing with the use of SASS variables. Be there too 😉
Top comments (0)