CSS Variables are here!

Well, sort of. CSS variables only work in Firefox Nightly right now — .

Disregarding that one major requirement, this is pretty exciting for anyone that hasn’t made the switch over to preprocessors, like Sass or Less.

Let’s start off by taking a look at the syntax for CSS variables and how to implement them in a style sheet.

How do CSS variables work?

Declaring variables in CSS isn’t difficult, but it is slightly different than declaring variables in other programming languages and CSS preprocessors.

Firstly, all variables must start with “var-“ and can either be declared globally, or attached to a specific element.

Global Variable

:root {
  var-name: value;
}

Scoped Variable

.element {
  var-name: value;
}

Obviously, global variables can be used in any rule set throughout your style sheet. However variables defined within a specific element can only be applied in the scope of that element.

Using a Global Variable

:root {
  var-background-color: #f00;
}

.class-name {
  background: var(background-color);
}

Scoped Variable

.element {
  var-margin-bottom: 0 0 16px;
}

.element .child-element {
  margin: var(margin-bottom);
}
  
.element .other-child-element {
  margin: var(margin-bottom);
}

The variable declared in .element will not work if referenced anywhere other than within that initial class name, or within a child element of that initial class name.

Those are the most basic of examples, but they illustrate the point that getting started with CSS variables really won’t be that hard.

Thoughts on CSS Variables

As I mentioned earlier, the inclusion of CSS variables is rather exciting, or rather it would be if I hadn’t already made the switch over to Sass.

The syntax is simpler in Sass to declare variables.

$variableName: value;

There’s no need to add the variable to a :root selector, to use it globally. Nor is there a need to start variables with var-. Finally there’s no special way to reference them when declaring property values.

.class-name {
  background: $variableName;
}

Another quick thing about Sass variables compared to vanilla CSS variables is that Sass will let you do math with your variables, where vanilla CSS variables presently don’t support that.

For instance, in Sass we can write:

$base-margin: 4px;
$extra-margin: $base-margin * 3; /* 12px */

One benefit that vanilla CSS variables will always have over preprocessor variables is that you won’t need a preprocessor to use them.

There may come a time when vanilla CSS variables become as powerful as their preprocessor counterparts. Until that time, I am still glad that they are being developed, and hope they get wider adoption soon.