variables.html.md.eco

---
layout: "post"
title: "Variables"
date: 2014-06-12
description: "Setting and using variables, scoping variables, default variable values, property lookup"
---

CSS is extremely repetitive. And if you are working on a big, complex project you will have identical values/colors all around the place. When the time comes for a minor modification or a global refactoring chances are that you will forget to change something somewhere.

This article is covers only basic uses of variables, for more advanced use check the [Variable Interpolation article](/variable-interpolation).

Here is the basic syntax for variables.

<%- @code('Variables', 'basic') %>


## Lazy loaded variables

Only Less supports lazy-loaded variables - you can type the variable even after the place you are calling it from and it will work. For example, this Less code works:

<%- @code('Variables', 'lazy') %>


## Default values

Default values for variables work just like regular values, but if both are declared, the latter will take precedence.

Such default values can be useful for cases when you are not sure whether a regular value for a variable is or will be declared.

<%- @code('Variables', 'default') %>

Less does not support setting a default variable, this has been [discussed before](https://github.com/less/less.js/pull/313) [a](https://github.com/less/less.js/pull/1104) [number](https://github.com/less/less.js/issues/1109) [of](https://github.com/less/less.js/pull/1705) [times](https://github.com/less/less.js/issues/1706) and Less is unlikely to get this feature, as its variables are lazy-loaded (see the previous section) and this may lead to confusion.


## Scoped variables

All preprocessors support scoped variables - they work only within the context they are defined in, and can be useful to avoid interference with similarly named variables.

Scoped variables work only within the current selector and all child selectors.

Note that Stylus allows another way of doing this - by defining the variable and the value at the same time.

<%- @code('Variables', 'scoped') %>


## Property lookup

Stylus supports another feature that is not yet present in other preprocessors - property lookup.

It works close to how scoped variables operate. In the example below you will see that the `.child` bubbles up until it finds a `@foo`.

<%- @code('Variables', 'lookup') %>

Property lookups, just like scoped variables are a great way to center an object. For example, you can set a negative `margin-left` that is half the width of the object, and a `margin-top` that is half its height, in addition to `left: 50%` and `right: 50%`.


## Variables accept many formats

All preprocessors allow you to set the following data types as variables
* numbers, with or without units - `1.25`, `16`, `10px`, `1.1em`, `320deg`
* strings of text, with and without quotes - `"foo"`, `'bar'`, `baz`
* colors - `red`, `#41ea07`, `hsl(333, 56, 43)`, `rgba(255, 0, 0, 0.5)`
* boolean values - `true`, `false`
* nulls - `null`
* lists of values, separated by spaces or commas - `1.5em 1em 0 2em`, `Helvetica, Arial, sans-serif`

In addition to the above, Sass and Stylus support mapping values from maps/hashes, something that Less is currently lacking.