LESS Parametric Mixins

What Are Parametric Mixins?

A parametric mixin declares one or more parameters inside its parentheses, each prefixed with @. When called, you supply values for those parameters, and every use of the parameter name inside the mixin's body is replaced with the supplied value.

Parameters can have default values, making them optional at the call site. If a caller omits an argument that has a default, the default value is used instead.

.box(@size: 100px, @color: #2563eb) {
  width: @size;
  height: @size;
  background: @color;
}

.thumbnail {
  .box(60px, tomato);
}

.placeholder {
  .box(); // uses both defaults: 100px and #2563eb
}

Arguments are matched positionally by default; omitted arguments fall back to their declared default values.

Parametric Mixin Syntax

.mixin(@param1: default1, @param2: default2) {
  property: @param1;
}

.caller {
  .mixin(value1, value2);
  .mixin(@param2: value2); // named argument
}

• Default values are written after a colon inside the parameter list.
• Arguments are matched positionally, in the order they're passed, unless called by name.
• Named arguments (@param: value) can be passed in any order at the call site.
• Use a semicolon separator instead of commas when an argument itself contains a comma-separated list.

Parametric Mixins Cheatsheet

Common parameter patterns for defining and calling mixins.

Defaults That Reference Other Parameters

A parameter's default value can reference an earlier parameter in the same list, which is useful for square or proportional defaults where one dimension should match another unless explicitly overridden.

.box(@width, @height: @width) {
  width: @width;
  height: @height;
}

.square { .box(80px); }          // 80px by 80px
.rectangle { .box(80px, 40px); } // 80px by 40px

Semicolon vs Comma Separators

By default, arguments are separated with commas. But if any single argument is itself a comma-separated list, like a box-shadow value, you must switch the mixin's overall argument separator to semicolons to avoid ambiguity.

.shadow(@x: 0; @y: 2px; @blur: 4px; @color: rgba(0, 0, 0, 0.2)) {
  box-shadow: @x @y @blur @color;
}

.card {
  .shadow(0; 4px; 8px; rgba(0, 0, 0, 0.15));
}

Semicolons make each parameter's boundary unambiguous, even though @color's value contains commas.

Variable Argument Lists

A mixin parameter followed by ... collects any remaining arguments into a single list variable, similar to rest parameters in JavaScript. This is useful for mixins that forward an arbitrary number of values to a CSS property like transition or grid-template-columns.

.transition(@rest...) {
  transition: @rest;
}

.button {
  .transition(color 0.2s, background 0.2s, transform 0.2s);
}

Common Mistakes

• Mixing commas inside an argument value while the mixin's own separator is also a comma, causing LESS to misread argument boundaries.
• Forgetting that positional arguments must be supplied in order, unless called by name.
• Assuming a required parameter (no default) can be silently omitted at the call site; LESS will error instead.
• Overcomplicating a mixin with too many optional parameters instead of splitting it into smaller, focused mixins.

Key Takeaways

• Parametric mixins accept arguments in parentheses, each prefixed with @.
• Default values make parameters optional; omitted arguments fall back to their default.
• Use semicolons instead of commas to separate arguments whenever one argument contains a comma-separated list.
• @rest... collects any remaining arguments into a single list variable.