LESS Mixins

Mixins are LESS's mechanism for reusing a group of declarations across multiple selectors. A mixin is defined like a normal class or ID selector, then called by name wherever you want its declarations applied.

What Is a LESS Mixin?

A mixin is written exactly like a class selector, .center { ... }, but instead of styling elements with that class directly, you call it from inside another rule using parentheses: .center();. The mixin's declarations are copied into the calling rule at compile time.

Mixins can be defined as class selectors (.name) or ID selectors (#name); both work identically when called. Convention favors class-style mixins since they read more naturally as reusable behavior.

.center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero {
  .center();
  min-height: 400px;
}

Compiles to .hero { display: flex; align-items: center; justify-content: center; min-height: 400px; }.

Mixin Definition and Call Syntax

.mixin-name() {
  property: value;
}

.caller {
  .mixin-name();
}

Empty parentheses () after the mixin name are optional at definition but recommended at the call site.
Calling a mixin with parentheses, .mixin();, prevents it from also being output as a standalone CSS class.
A mixin can contain any valid CSS declarations, plus nested selectors, variables, and even other mixin calls.
Mixin names follow the same naming rules as CSS class and ID selectors.

LESS Mixins Cheatsheet

Core mixin definition and usage patterns.

Pattern	Example	Notes
Define	`.center() { ... }`	Parentheses suppress standalone output
Call	`.center();`	Copies declarations into the caller
ID-style mixin	`#reset() { ... }`	Works identically to class-style
Without parens	`.center;`	Also works, but also outputs .center as a class if defined without ()
Nested content	`.card() { .title { ... } }`	Mixins can contain nested selectors too
Multiple calls	`.center(); .shadow();`	Combine multiple mixins in one rule

Why the Parentheses Matter

If a mixin is defined without parentheses, .center { ... }, it behaves as both a mixin and a regular CSS class, meaning it gets compiled into the output as a standalone .center { ... } rule in addition to being reusable. Adding empty parentheses, .center() { ... }, suppresses that standalone output.

// Without parens: outputs as its own class AND is reusable
.center { display: flex; }

// With parens: reusable only, no standalone .center rule in output
.center() { display: flex; }

Best practice: always define reusable mixins with parentheses to avoid unwanted standalone CSS.

Mixins Containing Nested Rules

A mixin isn't limited to flat declarations, it can contain nested selectors, and those nested rules are copied into the calling context along with everything else.

.card-base() {
  border-radius: 8px;
  padding: 1rem;

  .title {
    font-weight: 700;
  }
}

.product-card {
  .card-base();
}

The nested .title rule becomes .product-card .title in the compiled output.

Composing Multiple Mixins

Because mixin calls are just statements inside a rule, you can call several mixins in the same selector to compose behavior from smaller, focused building blocks.

Keep each mixin focused on one responsibility (centering, shadows, resets).
Compose complex components by calling multiple small mixins together.
Order matters only if later mixins override properties set by earlier ones.

Common Mistakes

Defining a mixin without parentheses and being surprised when it also appears as an unused standalone CSS rule.
Forgetting the parentheses at the call site, which still works in simple cases but is inconsistent style.
Writing one giant mixin that tries to do too much instead of composing several small, focused mixins.
Confusing a mixin call with a plain CSS class name, since both use the same .name syntax.

Key Takeaways

Mixins are defined like class or ID selectors and called with parentheses: .mixin();.
Adding empty parentheses at definition, .mixin() { }, suppresses unwanted standalone CSS output.
Mixins can contain nested selectors, variables, and even calls to other mixins.
Compose complex components from several small, focused mixins rather than one large one.

Pro Tip

Always define reusable mixins with empty parentheses, .mixin() { }, even if you never plan to style an element with that class directly. It keeps your compiled CSS free of unused, standalone rules.