Over a million developers have joined DZone.

CSS Variables: First Working Draft Released!

DZone's Guide to

CSS Variables: First Working Draft Released!

· Web Dev Zone
Free Resource

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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.



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.


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.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.


Published at DZone with permission of Catalin Red, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}