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.
How do you implement a CSS variable?
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.