In the Past..

It wasn’t that long ago that CSS variables were totally unrealistic. Why would they be? The web didn’t have huge stylesheets and problems with repetition as it does today. Over time people became more interested in CSS variables. It became a more and more appealing idea, and with seemingly no support from the W3C and the official CSS specification, people got to work making their own alternatives. The most popular of these is called SASS (Semantically Awesome Stylesheets).

The Present

In the past few weeks a new official specification for CSS variables has been introduced by the W3C with a lot of scrutiny and praise from the web design community. It’ll probably be a long time before any of us are realistically using variables every day, but it’s certainly something to look forward to.

Presently the realistic option to CSS variables is SASS. If you haven’t used SASS yet I’d definitely recommend it. SASS files use the extension .scss. Here are a few things that SASS can do that you might find interesting.

Variables, Nesting and Repetition

So the main point of this article is CSS variables, and SASS can do that pretty easily. Lets say you’re repeating the color ‘#cc412a’ all the time. You can put it in a variable and call it at any point in your stylesheet. Useful if you can’t remember hexadecimal values!

$redcolor: #cc412a;

a {
      color: $redcolor;
}

SASS goes much further than this though. Sick of writing out long strings of elements to target? SASS fixes that too with nestable classes. Lets say you need to apply some stuff to #wall and to #wall ul. Instead of doing #wall ul you can just nest it:

#wall {
     color: red;
     padding: 20px;
     background: blue;
     width: 500px;

     ul { 
           background: yellow; /* These colours certainly don't go */ 
     }
 
}

So the ul code you just wrote will only work for #wall ul. Perhaps one of the best features of SASS is the ability to reuse styles multiple times. Instead of rewriting lines of CSS over and over again, you can store them in a reusable ‘array’ of styles. These are called mixins. You could create a mixin at the top of your page called reusable like this:

@mixin reusable {
     background: blue;
     border-radius: 10px;
     box-shadow: inset 0px 0px 20px rgba(0,0,0,0.2);
}

and then later call it using this method:

div, input {
     @include reusable;
}

Definitely check SASS out. It could really decrease the amount of time you spend on a project, and lower load times.

The Future

Although SASS is a great option when it comes to CSS variables, it isn’t very accessible to beginners and is perhaps more complicated than necessary. It does add an extra layer of usability to CSS and open the platform up to people who are more experienced with programming. The W3C has decided to simplify this by presenting us with a new variable specification that browsers will eventually implement.

I imagine the key factor in designing a new specification for the W3C based off CSS variables will be accessibility to core users, while creating enough complexity to make it useful. Although the specification is in the early stages I decided to give you a little insight on it in its current state.

The data- attribute

In The CSS1 Variable Specification, variables are defined with the data prefix. They can be set in the :root, or any element for that matter. Presumably variables would cascade down, so if you initiate a variable in a lower DOM element it wouldn’t be recognizable in a parent element. A variable can be defined as anything which is a usable property in CSS. For example:

:root {
      data-color: #ccc;
      data-background: url('images/image.jpg') repeat-x;
}

We can then call these variables later in the CSS using the data() function. For example, lets say you want to call the data-color we defined earlier. We’d just do something like this. Notice we don’t include the data prefix.

#item {
     color: data(color);
}

Addition

The specification is in its early stages, so obviously a lot more still has to be added. One of the cool things in the specification at the moment is adding to variables. Lets say you want to specify a width for something, and then have another element 10% wider. You can do that.

:root {
     data-width: 10%;
}

#item {
     width: calc(data(width) + 10%);
}

calc() was actually introduced in the CSS3 specification.

To Finish

Until the CSS Variable Specification is complete though, we’ll just have to rely on SASS. The variable specification won’t kill SASS, because SASS is more than merely variables.