#Blogmas: What are CSS variables

Today’s a coding post day! One thing I want to do in 2020 is to start one coding post a week so if there’s anything you want to learn about let me know!

I cam across the concept of CSS variables quite a while ago and it was a game changer. Utilizing this concept makes massive (and minor) color scheme changes…. which I do quite a bit.

In order to start playing around with CSS variables back in September I decided to take my memory game project from my Nanodegree course and switch over the colors to utilize CSS variables. The code examples following will be taken from that but the Github for it is here and the photo of what it looks like is the feature image.

What are CSS variables?

CSS variables are a way to create consistency between all of the colors. It makes it easier to change the color scheme at one time instead of going through and making sure you don’t miss any of the CSS colors.

So far I have only played around with using CSS variables when it comes to colors. But you can use it for so much more. I’ve seen them used for paddings or margins as well.

How do you create a CSS variable?

For some reason I had this assumption that CSS variables would be difficult to learn or somehow that they would be more complex than necessary. I was surprised when I found out how easy it was.

Basically create the :root psuedo-class so the variables are applied to the entire project. ThenĀ  simply type –variablename: whatever the color/size/whatever it is you want.

CSS variable declaration

How do you implement a CSS variable?

I had been expecting it to be similar to variables in JavaScript where you just type it in. Nope. Now for CSS you have to write that it’s a variable. Luckily, it’s not a super long code that has to be implemented. This is the same whether you’re using it for colors, margins or anything else.

CSS variable implementation

Are there any down sides?

Yes actually! Internet Explorer doesn’t support them. Are any of us surprised? Nope. So the way around this to add it after the variables. But IE… please get it together.

CSS Variables Internet Explorer
Taken from Mozilla documentation.

Have you used CSS variables before? Let me know if you have any questions!

2 thoughts on “#Blogmas: What are CSS variables

  1. Nice post! You explained CSS variables well. Do we still have to worry about Internet Explorer? I thought even Microsoft stopped supporting it. lol


Let's talk!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.