Over a million developers have joined DZone.

CSS Variables: First Working Draft Released!

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


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 }}