CSS Variables

Developing a large Web application presumes the use of quite a lot of CSS rules. Rules tend to repeat themselves: properties with the same values can spring up in many CSS declarations. A minor change of CSS makes the developer scan all lines of code and insert multiple corrections. CSS variables considerably economize time spent on stylizing a site. Custom variable properties are a relatively fresh feature of the modern Web development. So far CSS variables are only implemented in Firefox: landed in Firefox 29, variables have become a stable trait in the latest release of Mozilla's browser.

The concept of the style variable is well known to those developers who employ Less, Sass, or Stylus in their works. However, a Less or Sass code snippet is not processed on the client side: a command line translator converts the code into standard CSS instead, then the output stylesheet can be served to the browser as an ordinary CSS file. CSS pre-processors use special tokens to designate variables: for example, Less uses the @ sign.

@main-color: navy;
body {
 color: @main-color;
}

Less-to-CSS conversion is performed by lessc - the Node.js-based compiler:

lessc style.less style.css

Compilation yields the following standard CSS:

body {
 color: #000080;
}

Less provides a client library to manipulate style variables and use other Less features immediately in the browser. The library can be employed on development stages to monitor style changes before submitting a Less file to the lessc translator. Both the library and Less files are linked with the main Web page:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Sass variables are prefixed with the $ sign:

$main-color: navy;
body {
 color: $main-color;
}

Sass is Ruby-based, its installation as a Ruby gem comes with a bunch of command line tools: these are scss, sass (for the older Sass syntax) and sass-convert:

scss style.scss style.css

Standard CSS Variables

Standard CSS variables start with two dashes (--):

body {
 --main-color: navy;
}

The var() function is called to apply predefined CSS variables to target elements:

div {
 color: var(--main-color);
}

The function can have an optional argument - a fallback value that is applied when the referenced property is invalid:

body {
 --header: lightblue;
}
h2 {
 color: var(--Header, blue);
}

CSS variables are case-sensitive, so the --Header property in the example above is considered invalid. As a result, the blue fallback value is used to set the color of the header element.

CSS variable properties are accessible by the JavaScript code using the CSS Object Model API. In the example below, CSS variables define linear gradients representing five graphical effects:

body {
 --lime-flash: linear-gradient(90deg, #070145, #645B8F 29%, #8373D5 40%, #A3FF01 60%, #6658B2 75%, #7AAF3B 90%, #070145);
 --spectrum: linear-gradient(90deg, #432777, #2323B7 17%, #50A053 40%, #F7FF01 70%, #FF3601);
 --horizon: linear-gradient(90deg, #2E2A8C, #A39DC9);
 --blue-sky: linear-gradient(90deg, #4A7590, #88B2CA);
 --electro-indigo: linear-gradient(90deg, #A8A8F8, #8181EF 9%, #3535B5 33%, #010141);
}

The custom properties are applied to markup elements by calling a method from the CSS Object Model APIs:

var styleSheet=document.styleSheets[0]; // CSSStyleSheet instance
styleSheet.insertRule(".fancy-effects {background-image: var(--lime-flash);}", 1);
styleSheet.insertRule("#spectrum-bar {background-image: var(--spectrum);}", 2);
. . .

Likewise, CSS variables can be passed to routines based on external JavaScript libraries, e.g., jQuery:

$("#horizon").css("background-image", "var(--horizon)");