LESS Property Variables

Beyond dynamic selectors, LESS also supports dynamic property names, letting a mixin decide which CSS property to set based on an argument, rather than hardcoding the property name.

What Are Property Variables?

Just like selector interpolation, wrapping a variable in curly braces on the left-hand side of a declaration, @{property}: value;, substitutes the variable's value in as the property name itself, rather than as the value.

This is a niche but powerful feature, most useful inside mixins that need to set a directional property (like margin-top vs margin-bottom) based on an argument.

@side: top;

.tooltip {
  @{side}-margin: 8px; // interpreted literally as written
}

// More realistically:
@property: background-color;

.box {
  @{property}: tomato;
}

The second example compiles to .box { background-color: tomato; }, with the property name itself resolved from a variable.

Property Interpolation Syntax

@{property-name}: value;

The interpolated variable sits on the left of the colon, replacing the property name entirely.
The resulting text must be a valid CSS property name once resolved.
Property variables are most useful inside mixins that receive a property name as an argument.
This feature is used sparingly in most real projects; overuse can make styles harder to statically analyze.

Property Variables Cheatsheet

Common patterns for dynamic property names in mixins.

Pattern	Example	Notes
Basic interpolation	`@{prop}: value;`	@prop must resolve to a valid CSS property
Directional mixin	`.side(@dir, @val) { margin-@{dir}: @val; }`	Generates margin-top, margin-left, etc.
Vendor-prefixed property	`@{prefix}transform: rotate(5deg);`	Rarely needed with modern autoprefixing

A Directional Spacing Mixin

One of the clearest real-world uses of property interpolation is a mixin that sets a spacing property in a given direction, avoiding four nearly identical mixins for top, right, bottom, and left.

.spacing(@property, @direction, @value) {
  @{property}-@{direction}: @value;
}

.card {
  .spacing(margin, top, 1rem);
  .spacing(padding, left, 0.5rem);
}

Compiles to margin-top: 1rem; and padding-left: 0.5rem;, generated from one flexible mixin.

Why This Feature Is Used Sparingly

Because the property name itself becomes dynamic, tools that statically analyze CSS (some linters, some IDE autocomplete features) can struggle to understand what property is actually being set until the LESS is compiled.

Prefer explicit property names in most day-to-day styling.
Reserve property interpolation for genuinely generic, reusable mixins.
Document any mixin using property interpolation clearly, since the resulting property isn't obvious from the mixin body alone.

Common Mistakes

Interpolating a property name that doesn't resolve to a valid CSS property, producing invalid compiled CSS silently.
Overusing property interpolation for styles that would be clearer written out explicitly.
Forgetting that IDE autocomplete and static analysis tools may not understand a property set through interpolation.
Combining property interpolation with deeply nested logic, making a mixin difficult for teammates to follow.

Key Takeaways

@{name} interpolation on the left of a colon makes a property name itself dynamic.
This is most useful in generic mixins, like a directional spacing helper.
Property interpolation is a niche feature; explicit property names remain clearer for most everyday styling.
Document mixins using property interpolation, since the resulting property isn't obvious from the source alone.

Pro Tip

Reserve property interpolation for small, well-documented utility mixins (like a directional spacing helper), and avoid it in day-to-day component styles where an explicit property name is simply clearer.