How to use CSS Variables var()

Did you know that now, with the introduction of variables in CSS it is possible to streamline page production and rapidly deploy styles across large amounts of pages?

What's really great about using CSS variables is how you can change the color of your design without having to copy and paste colors over again. Instead, just place them in a variable so they're easy for later use!

CSS variables offer a ton of flexibility. You can make the values you want with local or global scope, change them easily using JavaScript and even set different styles based on media queries!

HOW IT WORKS

You can declare your variables at the global or local scope. I prefer to use the global method to declare variables in the top of the css style sheet. You can use the :root selector to define your global scope CSS variables. See the example below:

View Code Example Below:

<style>
:root {
  --color_prim: #1e90ff;
  --color_bg: #ffffff;
  --color_sec: #000000;
}

.header {
  background-color:var(--color_prim);
}

.main_container {
  background-color:var(--color_bg);
}

.footer {
  background-color:var(--color_sec);  
}
</style>
  

TIP*

Use in combonation with CSS calc() function for some really cool tricks. Part 2 of this blog post will show you exactly how we can use this to our advantage and save some serious time.

Why You might need this

• You're creating hundreds of css styles and you're repeating the same color code in multiple places.
• To create a "theme" css sheet that can apply to the HTML and change the color pallet of a page based on the css variables used.
• Steamline the production of multiple pages that need to have compltly different color combinations.

Updated: June 2021

Feel free to share this Source Code and use on your personal Website Projects.
All scripts and snippets authored by https://www.andysotura.com