Less Variables and Mixins Guide

Less Variables

Less variables start with @ and store reusable values.

@primary: #2563eb;
@font: 'Inter', sans-serif;
@base-spacing: 8px;

body {
  font-family: @font;
  color: @primary;
}

Operations

@base: 10px;
.box {
  padding: @base * 2;     /* 20px */
  margin: @base + 5px;    /* 15px */
}

Mixins

.bordered(@color: #ccc, @width: 1px) {
  border: @width solid @color;
}

.card { .bordered(); }
.alert { .bordered(red, 2px); }

Mixins as Functions (return values)

.average(@x, @y) {
  @result: ((@x + @y) / 2);
}
.box {
  .average(16px, 50px);
  padding: @result;  /* 33px */
}

FAQs

Why @ for variables?

It's Less's syntax (SCSS uses $). More in our Less section.

Can mixins be guarded with conditions?

Yes — Less supports guards like when (@x > 0).