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...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Less Web Development Essentials (Second Edition)

By : Jobsen

Less Web Development Essentials (Second Edition)

By: Jobsen

Overview of this book

Variable interpolation

Less Web Development Essentials (Second Edition)

By : Jobsen

Less Web Development Essentials (Second Edition)

By: Jobsen

Overview of this book

Variable interpolation

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access