LESS Interpolation

What Is Interpolation in LESS?

Interpolation, written @{name}, injects a variable's resolved value directly into a larger piece of text, whether that's a selector, a property name, a string, a URL, or an import path. It's the mechanism that makes LESS's dynamic selectors and property names possible.

The core rule to remember: use @name when the variable is the entire value, and @{name} whenever the variable is embedded inside something larger.

@theme: dark;
@icon-path: "./icons";

.@{theme}-mode {
  background: url("@{icon-path}/moon.svg");
}

Both the selector and the URL path use interpolation to embed variables inside larger strings.

Where Interpolation Works

.@{selector-part} { }        // selectors
@{property}: value;          // property names
content: "@{text-part}";     // strings
url("@{path}/file.svg")      // URLs
@import "@{folder}/file";    // import paths (less common)

• Interpolation works inside selectors, property names, quoted strings, and URLs.
• It also works inside @import paths, though this is rarely needed in practice.
• Interpolation always requires curly braces; a bare @name inside a larger string will not be substituted.
• The interpolated value is inserted as plain text, with no additional quoting or escaping applied automatically.

LESS Interpolation Cheatsheet

Every context where @{name} interpolation is valid.

Interpolation in URLs

A common real-world use case is building a themed or environment-specific asset path from a shared base variable, keeping every url() reference consistent if the base path ever changes.

@cdn: "https://cdn.example.com/assets";

.logo {
  background-image: url("@{cdn}/logo.svg");
}

Interpolation in Strings

Interpolation inside a quoted string is useful for building dynamic content values, data-* attribute selectors, or debug output that combines a variable with surrounding literal text.

@version: "1.4.0";

.badge::after {
  content: "v@{version}";
}

Recap: The Three Interpolation Contexts

It's worth explicitly recapping the three interpolation contexts covered across this and the previous two lessons, since each solves a distinct real-world problem.

• Selector interpolation: dynamic class, ID, and attribute selector names.
• Property interpolation: dynamic property names inside generic, reusable mixins.
• String and URL interpolation: dynamic text content and asset paths.

Common Mistakes

• Forgetting curly braces and writing @name instead of @{name} when embedding a variable inside a larger string.
• Assuming interpolation automatically adds quotes or escaping around the substituted value; it inserts plain text exactly as resolved.
• Using interpolation in a media feature with a value that doesn't resolve to valid CSS syntax, like a color instead of a length.
• Overusing interpolation for values that would be clearer as a normal, single @name property value.

Key Takeaways

• Interpolation (@{name}) injects a variable's value into a larger piece of text: a selector, property name, string, or URL.
• Use plain @name when the variable is the entire value; use @{name} when it's embedded inside something larger.
• Interpolation is most valuable for dynamic selectors (utility class generation) and dynamic asset URLs.
• Interpolated values are inserted as plain text with no automatic quoting or escaping.