CSS Variables

You guys, I could not believe my eyes when I read that plain old regular CSS will soon have variables.  That’s right–no preprocessors needed!

Yes, you can use SASS or LESS and a preprocessor and do all sorts of fancy and useful things.  But that’s not really the point.

The point is that with plain old regular CSS you can define a variable, say your page’s background color, and use that variable name instead of the hexadecimal code or rgb values each time.  It’s just so simple and glorious!  There is also a calc() function, and many other fun things.

Currently, Chrome 49, Firefox 42, Safari 9.1, and iOS Safari 9.3 all support custom properties, so it may be a while before this is universal and accessible to most users, but it’s certainly one the way!

To learn more, I found these resources super helpful:

CSS Variables: Why Should You Care?

Why I’m Excited About Native CSS Variables

And to throw some controversy into the mix, not all coders are pumped about CSS Variables.  Here’s one post to that effect:

CSS Variables Are A Bad Idea


Leave a Reply

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 )

Google photo

You are commenting using your Google 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