LESS Basics

Before diving into mixins, guards, and architecture, you need a working mental model of what a LESS file actually contains. This lesson walks through the basic building blocks: variables, nesting, and how LESS output maps back to the CSS you already know.

What Makes Up a LESS File?

A typical .less file mixes plain CSS declarations with LESS-only features: @variables for reusable values, nested selectors that mirror your HTML structure, .mixin() blocks for reusable declarations, and @import to pull in other files.

None of these LESS-only features exist in the compiled output directly, the compiler resolves them at build time and emits plain, browser-ready CSS rules.

// _button.less
@radius: 8px;

.btn {
  border-radius: @radius;
  padding: 0.6rem 1rem;

  &:hover {
    opacity: 0.9;
  }
}

@radius and the &:hover nested rule are LESS features; the compiled CSS contains only .btn { ... } and .btn:hover { ... }.

Basic LESS Syntax Rules

selector {
  property: value;

  nested-selector {
    property: value;
  }
}

LESS uses the same curly braces { } and semicolons ; as plain CSS.
Variables start with an at sign, such as @spacing-md: 1rem;.
Nested rules stay inside the parent's curly braces.
Line comments // and block comments /* */ are both supported.

LESS Basics Cheatsheet

The everyday syntax you will use in nearly every LESS file.

Concept	Example	Notes
Variable	`@gap: 1rem;`	Reusable named value
Nesting	`.nav { li { ... } }`	Compiles to `.nav li { ... }`
Parent selector	`&:hover`	References the enclosing selector
Import	`@import "variables";`	Loads another .less file
Mixin	`.center() { ... }`	Named, reusable declaration block
Mixin call	`.center();`	Applies a mixin's declarations
Line comment	`// not in output`	Removed during compilation
Block comment	`/* kept in output */`	Preserved in compiled CSS

Variables at a Glance

LESS variables store a value once and let you reuse it anywhere in the file (or across files, once imported). This is the single most impactful feature for keeping colors, spacing, and typography consistent.

@primary: #2563eb;
@spacing-md: 1rem;

.alert {
  background: @primary;
  padding: @spacing-md;
}

Nesting at a Glance

Nesting lets you write child selectors inside a parent selector's braces, which visually mirrors your HTML structure and avoids repeating the parent selector for every related rule.

.card {
  padding: 1rem;

  .title {
    font-weight: 700;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

Compiles to .card { ... }, .card .title { ... }, and .card:hover { ... }.

A Typical LESS File Layout

Most real projects split variables, mixins, and component styles into separate files, then pull them together through a small number of @import statements in a main entry file.

variables.less holds shared colors, spacing, and typography values.
mixins.less holds reusable .mixin() declarations.
Component files (buttons.less, cards.less) hold styles for one piece of UI each.
main.less imports everything else in the correct order.

Common Mistakes

Forgetting the trailing semicolon after a variable declaration or a mixin call.
Mixing up LESS's @variable syntax with CSS's native @media, @import, or @font-face at-rules, which are unrelated.
Writing deeply nested selectors that produce unexpectedly long, over-specific compiled CSS selectors.
Assuming line comments (//) will appear in the compiled CSS output; they never do.

Key Takeaways

A LESS file mixes plain CSS with variables, nesting, mixins, and imports.
None of LESS's extra features exist in the compiled CSS, only their resolved output does.
Nesting mirrors HTML structure but should stay shallow to avoid overly specific selectors.
Splitting variables, mixins, and components into separate files keeps large projects organized.

Pro Tip

Keep nesting no more than 3 levels deep. Beyond that, compiled selectors become unnecessarily specific and hard to override later.