Variable interpolation

In Less, variables can be used inside selector names, property names, URLs, and even import rules. The compiler applies string interpolation to replace the variable reference with its corresponding value.

Variables can be written with curly brackets around their name to prevent ambiguity. Take a look at the following Less code example:

@var: less;
.@{var} {
  property: ~"@{var}-5";
}

The preceding code will get compiled in CSS as follows:

.less {
  property: less-5;
}

Since Less v1.6, you can also use variable interpolation for properties. You can see this if you inspect the following Less code:

@property: width;
.fixed {
  @{property}: 100%;
  max-@{property}: 500px;
}

The preceding code will get compiled in CSS as follows:

.fixed {
  width: 100%;
  max-width: 500px;
}

In some situations, you will need quotes around the values; escaping these values will be explained in the next section. Variable interpolation can also be used to create variable variables, as can be seen in...