LESS Syntax Fundamentals

LESS syntax is intentionally close to CSS, so anything you already know about selectors and declarations still applies. This lesson focuses on the small number of extra syntax rules LESS adds on top.

LESS Syntax Building Blocks

A LESS stylesheet is made of statements: standard CSS rule sets, @variable declarations, @import statements, and .mixin() definitions or calls. Every statement ends in a semicolon, except rule sets, which end with a closing curly brace.

Because LESS is a superset of CSS syntax, the parser accepts any valid CSS as-is. The extra syntax, variables, interpolation, guards, only activates the LESS-specific features layered on top.

@brand: #6d28d9;

.button {
  background: @brand;
  border: 1px solid darken(@brand, 10%);
}

@brand is a LESS variable; darken() is a LESS built-in color function. Everything else is plain CSS syntax.

Statement Types in LESS

@variable: value;               // variable declaration
@import "file";                 // import statement
.mixin() { ... }                // mixin definition
.mixin();                       // mixin call
selector { property: value; }   // standard rule set

Variable declarations and mixin calls both end with a semicolon.
Rule sets are delimited by curly braces { }, just like plain CSS.
LESS is whitespace-insensitive; indentation is a style choice, not a syntax requirement.
Property values can use LESS operations (+, -, *, /) directly, unlike plain CSS.

LESS Syntax Cheatsheet

The core syntax elements you'll use in nearly every LESS file.

Element	Example	Purpose
Variable	`@color: red;`	Named, reusable value
Nesting	`.a { .b { } }`	Selectors nested inside a parent
Parent selector	`&`	References the enclosing selector
Mixin	`.box() { }`	Reusable declaration block
Parametric mixin	`.box(@size) { }`	Mixin accepting an argument
Guard	`when (@a > 0)`	Conditional mixin logic
Interpolation	`@{name}`	Injects a variable into a selector or string
Comment	`// text` or `/* text */`	Line or block comment

Declarations and Values

Every declaration pairs a property with a value, exactly like CSS. LESS extends the value side by allowing variables, arithmetic, and function calls anywhere a plain value would go.

@base: 8px;

.card {
  padding: @base * 2;
  margin-bottom: @base;
}

At-Rules in LESS

Native CSS at-rules like @media and @font-face work exactly as they do in plain CSS, and can even be nested inside a selector in LESS. LESS-specific at-rules, @import and @plugin, add build-time behavior on top.

.card {
  padding: 1rem;

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

LESS lifts nested @media blocks out to the top level automatically during compilation.

Whitespace and Formatting

LESS does not enforce a specific indentation style. Consistent formatting is a team convention, typically enforced with a linter like stylelint, not a requirement of the language itself.

Tabs vs. spaces is a project-level style choice.
Multiple statements can share a line, though one-per-line is far more readable.
Semicolons are required after declarations and mixin calls, but not after a closing }.

Common Mistakes

Forgetting that LESS's @variable syntax looks similar to, but behaves very differently from, native CSS at-rules like @media.
Leaving out a semicolon after the last declaration in a rule set; LESS tolerates this, but it's inconsistent style.
Assuming nested @media blocks stay nested in the output; LESS actually hoists them to the top level.
Writing overly compressed, single-line LESS that becomes hard for teammates to review in diffs.

Key Takeaways

LESS syntax is CSS syntax plus variables, nesting, mixins, and a handful of LESS-specific at-rules.
Values support arithmetic and function calls directly, unlike plain CSS.
Native CSS at-rules like @media can be nested inside selectors; LESS hoists them automatically.
Consistent formatting is enforced through tooling like stylelint, not the language itself.

Pro Tip

Add stylelint with a LESS-aware config to your project early. It catches syntax mistakes, like a missing semicolon or an unclosed brace, before they reach a build error.