HTML5 Zone is brought to you in partnership with:

Catalin Rosu, a.k.a Red, is a professional web designer and developer who loves to be creative and enjoys CSS techniques. You can find articles and tutorials on front-end web development by visiting his blog at red-team-design.com. Also, you can connect with him on Twitter as @catalinred. Catalin is a DZone MVB and is not an employee of DZone and has posted 27 posts at DZone. You can read more from them at their website. View Full User Profile

CSS Variables: First Working Draft Released!

04.12.2012
| 3812 views |
  • submit to reddit

If you are a developer then you are very familiar with variables and they are probably one of your best friends. A variable is by definition a temporary storage which contains some known or unknown quantity or information, a value.

But, what is this having to do with the CSS we all know? The latest news is that the first working draft of CSS Variables just got released.

Why CSS variables?

Variables in CSS is something that people have been asking and wanting for a quite long time.

Think about all those colors, heights, widths and sizes: will not be great to define them just once? After all, this is what we all want: write less & do more.

A CSS common practice

When people asked about defining color variables in CSS, adding a comment at the top of the CSS file was sort of variable’s behavior simulation:

/*--------------------------
link color: #99D1FF (light blue)
box color: #555 (dark gray)
--------------------------*/

Later, to update you’d need to search and replace content.

The LESS/Sass ways to do it

The idea of using variables for style sheets was one of those that have propelled LESS or Sass.

LESS

Sass

How it will work

First of all, please keep in mind that there’s no browser support actually. But this is how it will work: var-foo for definition, var(foo) for usage.

According to the draft:

Any property name starting with the prefix “var-” is a variable property


Quick example

The following rule declares a variable property named “var-header-color” on the root element, and assigns to it the value “#99D1FF”:

:root {
  var-header-color: #99D1FF;
}

Further, its value can be referenced via the “header-color” variable:

h1 {
  color: var(header-color);
}

Using color variables within gradient declarations can be very helpful too. You’d just need to replace values for the variables, and voila: all gradients updated. Sounds pretty cool if you ask me.

Also, when creating a layout, variables together with the calc() function can help you making interesting calculations.

Conclusion

CSS is not a programming language and it neither shouldn’t be complicated too. Though, I think you agree that using CSS variables will be able to help you avoiding redundancy and creating more flexible style sheets.

Now, with the first module for CSS Variables release, we’re looking forward to seeing browsers implementing it in the near future.

Published at DZone with permission of Catalin Red, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Daniel Blendea replied on Thu, 2012/04/12 - 11:07am

I don't get it, why do we have to prefix each variable with  var- and later use it with var()?

Why not declare it like Sass or LESS do it, with 1 special character, @color or $color, then later use it just the same? The operations, as well  +, *, no calc()

Heck, I would implement both special characters, so that people can use their .less and .sass files immediately by just changing the file extension.

It's definitely faster to write and the outcome is the same. Only the css parser of the browser must be updated to recognize and use the variables. Let the machine do the hard work ;)

James Cole replied on Sat, 2012/04/14 - 2:48am

What a horribly crappy syntax... though after all the push back from the standards guys for the last 15 years, I'm overjoyed we're getting anything at all from them.

Catalin Red replied on Sat, 2012/04/14 - 8:11am

I agree the current syntax for CSS variables may not be the best but that may change in the future.

Just think about the initial draft for CSS3 Flexbox, note that the latest syntax is quite different (and improved) from its initial one.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.