LESS Operations

What Are LESS Operations?

Any numeric LESS value can be combined with +, -, *, or / directly inside a declaration, no calc() wrapper required (though calc() still works and is sometimes preferable for runtime-dependent values). LESS resolves the math at compile time and outputs a single static value.

Operations also work on colors: adding, subtracting, or scaling a color's RGB channels mathematically. This underlies several of LESS's built-in color functions internally.

@base: 8px;

.card {
  padding: @base * 2;      // 16px
  margin-bottom: @base + 4; // 12px
  width: 100% / 3;          // 33.333333%
}

All three operations are resolved at compile time; the compiled CSS contains only the final numeric values.

Operation Syntax

value + value
value - value
value * value
value / value

• Operators work on numbers with or without units, and can mix a unit-bearing value with a unitless one.
• When both operands have units, the result takes the unit of the first (left-hand) operand.
• Division (/) inside parentheses is always treated as math; outside parentheses it can sometimes be ambiguous with CSS shorthand like font: 16px/1.5.
• Operations also apply component-wise to colors, useful for custom color blending logic.

LESS Operations Cheatsheet

Common arithmetic patterns and their compiled results.

How LESS Handles Units in Math

When both operands carry compatible units (like cm and mm, or s and ms), LESS converts them and produces a result in the first operand's unit. When one operand is unitless, it simply adopts the other operand's unit without conversion.

@a: 1cm + 5mm; // 1.5cm, mm converted into cm
@b: 10px + 2;  // 12px, unitless value adopts px

Operations on Colors

Arithmetic on two colors is applied channel by channel (red, green, blue), clamped to the valid 0-255 range per channel. This is a lower-level tool than the dedicated color functions covered in the next lessons, but it's useful to understand what happens underneath.

@base: #222222;
@highlight: @base + #111111; // #333333

For most real theming needs, prefer dedicated functions like lighten() and darken() over raw color math.

Operator Precedence and Parentheses

LESS follows standard mathematical operator precedence: multiplication and division happen before addition and subtraction. Use parentheses to make intent explicit and to override the default precedence when needed.

@result: 2 + 3 * 4;   // 14, multiplication happens first
@grouped: (2 + 3) * 4; // 20, parentheses force addition first

Common Mistakes

• Writing font: @size/@line-height; and expecting math, when LESS may treat the slash as CSS shorthand rather than division outside of parentheses.
• Mixing incompatible units, like adding px directly to deg, and expecting a meaningful automatic conversion.
• Using raw color arithmetic (+/-) when a dedicated function like lighten() or mix() would produce a more predictable, perceptually correct result.
• Forgetting operator precedence and needing parentheses to force addition or subtraction before multiplication or division.

Key Takeaways

• LESS supports +, -, *, and / directly on numeric values, resolved at compile time.
• The result of a mixed-unit operation takes the unit of the first operand.
• Division can be ambiguous with CSS shorthand outside of parentheses; wrap it in parentheses to force math.
• Operations also apply to colors channel-by-channel, though dedicated color functions are usually clearer.