Skip to content

Introduction to LESS CSS

LESS (Leaner Style Sheets) is a backward-compatible CSS preprocessor that extends plain CSS with variables, nesting, mixins, operations, and functions. This introduction explains what LESS is, how it compiles to ordinary CSS, and why it became one of the most influential preprocessors in front-end development.

What Is LESS?

LESS is a dynamic style sheet language created by Alexis Sjogren in 2009, and later developed further by Luke Watson and Cloud Nine Media. It was one of the first CSS preprocessors to gain mainstream traction, largely because it could run directly in the browser via less.js during development, in addition to compiling ahead of time.

Because LESS is a superset of CSS, any valid CSS file is already valid LESS. That single fact made adoption easy: teams could rename .css files to .less and start introducing variables and nesting incrementally, without rewriting a single existing rule.

// styles.less
@primary: #2563eb;

.button {
  background: @primary;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
}

This LESS file compiles to plain CSS where @primary is replaced everywhere it's used, no @primary variable ever reaches the browser.

How LESS Fits Into a Project

source.less  --(lessc compiler)-->  output.css  --(linked in HTML)-->  browser
  • You author styles in .less files, which are never served directly to the browser.
  • A build step (the lessc CLI, Vite, webpack, or a bundler plugin) compiles LESS into CSS.
  • Only the compiled .css file is included in your HTML with a normal <link> tag.
  • LESS can also run in-browser via less.js for quick prototypes, though this is not recommended for production.

LESS Quick Reference

The core building blocks you will meet throughout this course, each covered in its own lesson.

Feature Example Purpose
Variables @primary: #2563eb; Store reusable values
Nesting .card { .title { ... } } Mirror HTML structure in selectors
Imports @import "buttons"; Split styles into importable files
Mixins .center() { ... } Reuse groups of declarations
Parametric mixins .box(@size) { ... } Mixins that accept arguments
Guards when (@a > 0) Add conditional logic to mixins
Parent selector & Reference the enclosing selector
Interpolation @{name} Inject a variable into a selector or property

Why LESS Was Created

Plain CSS has no variables (until CSS custom properties arrived years later), no nesting, and no way to reuse a group of declarations without copy-pasting them across unrelated rules. As stylesheets grew, teams repeated the same colors and spacing values dozens of times.

LESS solved this by adding programming-language features, variables, mixins, operations, and conditional guards, while keeping the compiled output 100% valid CSS that every browser already understands.

  • Eliminates duplicated values through @variables.
  • Reduces repetitive selectors through nesting and the parent selector &.
  • Enables reusable groups of styles through .mixin() blocks.
  • Supports splitting large stylesheets into organized, importable files.

LESS vs Plain CSS

Every valid CSS file is technically also valid LESS, which makes adopting LESS incremental: you can rename a .css file to .less and start introducing variables and nesting gradually, without rewriting anything that already works.

/* plain-css.css */
.card {
  border-radius: 8px;
}
.card-title {
  font-weight: 700;
}

// same-idea.less
.card {
  border-radius: 8px;

  &-title {
    font-weight: 700;
  }
}

Both examples compile to the same CSS, but the LESS version keeps related rules visually grouped.

Compiling LESS

Most modern build tools, Vite, webpack, Parcel, and framework integrations, compile .less files automatically once the less npm package is installed. The official lessc command-line tool can also compile files directly.

  • npm install -D less adds the LESS compiler to a project.
  • Most bundlers automatically detect .less files once less is installed, no extra config needed.
  • The CLI can also be run directly: lessc input.less output.css.

Common Mistakes

  • Thinking LESS is a new styling language that runs in the browser; production sites should always precompile it to plain CSS.
  • Believing @variables become CSS custom properties automatically; LESS variables are compile-time only unless explicitly output as a custom property.
  • Relying on the in-browser less.js runtime for production sites instead of precompiling during a build step.
  • Confusing LESS's @variable syntax with Sass's $variable syntax when switching between the two ecosystems.

Key Takeaways

  • LESS is a CSS preprocessor that compiles .less files into plain CSS before it reaches the browser.
  • It adds variables, nesting, mixins, operations, and guarded conditional logic on top of CSS syntax.
  • Every valid CSS file is valid LESS, making adoption incremental.
  • Precompile LESS ahead of time with lessc or a bundler; avoid the in-browser compiler for production.

Pro Tip

Install LESS with npm install -D less and let your bundler compile it automatically during the build, reserve the in-browser less.js script for quick, throwaway prototypes only.

You now understand what LESS is and why it exists. Next, explore LESS Basics to see the core building blocks you will use throughout this course.