Variables – Less

Demo

Summary

In Less, variable names start with an @ sign:

@main-color: red;

h1 {
  color: @main-color;
}

p {
  background-color: @main-color;
}

Compiled CSS:

h1 {
  color: red;
}

p {
  background-color: red;
}

To see a live example of this code, click the link in the Demo section below.

Details

Less variables allow you to reuse the same value in multiple spots in your style sheet. This is accomplished by storing a value in a variable name and then referencing that variable name throughout your style sheet (see the code above for an example). You can store any CSS value: a color, a font, a width, etc.

Variables in Less start with a dollar sign and don’t have to be wrapped in curly brackets. They use the following format:

@variable-name: value;

Using variables also means it’s easy to update multiple CSS rules at once. In the example above, I can change the @main-color variable to blue, which will automatically update the color property of the h1 tag and the background-color property of the p tag in the compiled CSS. This is easier than having to manually update each CSS rule where the color appears.

More Examples

// Less variable storing fonts
@font-stack: Helvetica, sans-serif;

// Sass variable storing a width value
// Note: Variable names can be one word
@width: 100px;

body {
  font: 100% @font-stack;
}

.rectangle {
  width: @width;
}

Exercises

First, recreate the Less code in the embedded CodePen demo.

Then try changing the value in the variable.

Back to: Less Reference