The Less file (.less)

The basics

What is a Less file?

Anatomy

What's inside a Less file

Less is a superset of CSS: a .css file is already valid Less. On top of that come variables, nesting, mixins, operations and functions. Here is a small stylesheet, part by part. It assumes a variables.less file next to it that defines @brand and @radius.

// buttons.less: button styles
@import "variables";

@padding: 0.5rem 1rem;

.focus-ring(@c: @brand) {
  outline: 3px solid @c;
}

/* Buttons */
.button {
  padding: @padding;
  background: @brand;
  border-radius: (@radius / 2);

  &:hover {
    background: darken(@brand, 10%);
  }

  &--large {
    font-size: 1.25rem;
  }

  &:focus-visible {
    .focus-ring();
  }
}

1. 1// buttons.less: button styles

   A line comment

   Comments starting with // are for people editing the file. They're dropped from the compiled CSS.

2. 2@import "variables";

   Importing another file

   Pulls in variables.less at compile time, so its variables and mixins are available here. The .less extension is optional. Unlike a CSS @import, the browser never sees it: everything ends up in one CSS file.

3. 3@padding: 0.5rem 1rem;

   A variable

   Less variables start with @, like CSS at-rules. They are evaluated lazily: a variable can be used before the line that defines it, and the last definition in a scope wins.

4. 4.focus-ring(@c: @brand) { … }

   A parametric mixin

   A reusable block with a parameter and a default value. The brackets after the name keep the mixin itself out of the CSS; a plain class such as .focus-ring { … } would be output as well as being usable as a mixin.

5. 5/* Buttons */

   A block comment

   A normal CSS comment, copied into the output.

6. 6(@radius / 2)

   An operation

   Maths with units: 12px / 2 gives 6px. Since Less 4.0, division only happens inside parentheses by default; without them @radius / 2 is left as written.

7. 7&:hover { … }

   Nesting and the parent selector

   A rule inside a rule. & stands for the outer selector, so this compiles to .button:hover.

8. 8darken(@brand, 10%)

   A colour function

   Runs while compiling and outputs a plain colour: #0058d0. Less has functions for colours, maths, strings, lists and types.

9. 9&--large { … }

   Building a class name

   &--large becomes .button--large. Native CSS nesting can't do this: there, & can't be glued to the rest of a class name.

10. 10.focus-ring();

    Calling the mixin

    Copies the mixin's declarations here. Write the brackets: calling a mixin without them is deprecated in Less 4, and current versions print a warning.

How it's used

How a Less file becomes CSS

/* Buttons */
.button {
  padding: 0.5rem 1rem;
  background: #046eff;
  border-radius: 6px;
}
.button:hover {
  background: #0058d0;
}
.button--large {
  font-size: 1.25rem;
}
.button:focus-visible {
  outline: 3px solid #046eff;
}

Versions

Less 3, Less 4 and the maths change

Client-side

Compiling in the browser, and why not to do it in production

<!-- Development only: compiles styles.less in the browser on every load -->
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js"></script>

<!-- Production: compile once with lessc, then link the CSS -->
<link rel="stylesheet" href="styles.css">

Comparison

Less vs Sass (SCSS) vs plain CSS

File conventions

Imports, file names and encoding

Troubleshooting

Why won't my Less compile?

How to

How to open, edit and convert a Less file

Security

Is a Less file safe?

Free downloads

Sample Less files to download

Free sample Less files for testing compilers, build pipelines, editors and syntax highlighters. Every file compiles without errors or warnings in less.js 4.9.1, and the compiled CSS passes the CSSTree validator.

Loading…

What's inside sample-styles.less

The file is commented: open it in a text editor and each numbered comment marks one of these parts. sample-styles.css is what lessc makes of it.

1. Comments 1 and 2: variables and operations

   @brand, @radius, @space and @prefix, and @gutter: (@space / 2), which needs its parentheses in Less 4.

2. Comments 3 and 4: mixins and guards

   .rounded() with a default parameter, and two versions of .text-on() with when guards that pick dark or light text from the background's lightness.

3. Comment 5: interpolation and nesting

   .@{prefix}-card becomes .ui-card, with nested h2, &:hover, &--featured and a media query that bubbles up.

4. Comments 6 and 7: functions and :extend

   darken() and fade() compute colours. &:extend(.focus-ring) adds .ui-button:focus-visible to the .focus-ring rule instead of copying its declarations.

5. Comments 8 and 9: a map and each()

   @tones[warning] looks up one value; each(@tones, …) writes a badge class per entry, with the guard mixin choosing the text colour.

6. Comment 10: a counted loop

   A recursive mixin with a guard writes .mt-1 to .mt-4, the classic Less loop.

7. Comments 11 and 12: escaping and custom properties

   ~"calc(100% - @{gutter})" outputs text as written, and --brand: @brand; writes a Less value into a CSS variable.

All sample Less files

• Commented Less stylesheet

  sample-styles.less · 2.8 KB (2,865 bytes)

  A self-contained stylesheet with variables, operations, mixins, guards, interpolation, nesting, colour functions, :extend, a map, each() and a recursive loop, with 12 numbered comments.

  • Testing Less compilers and build pipelines
  • Teaching the parts of a Less file
  DownloadOpen

• Compiled CSS of the featured sample

  sample-styles.css · 1.1 KB (1,083 bytes)

  The output of npx -y less sample-styles.less sample-styles.css with less.js 4.9.1.

  • Comparing your compiler's output
  • Seeing what each Less feature turns into
  DownloadOpen

• Less 4 maths modes

  sample-math.less · 994 bytes

  Division and multiplication with and without parentheses, plus CSS slashes in grid-area and aspect-ratio. Compile it with different --math options to see the results in the table above.

  • Checking which maths mode a build uses
  • Testing a Less 3 to Less 4 upgrade
  DownloadOpen

• UTF-8 with BOM and CRLF line endings

  sample-windows.less · 708 bytes

  Saved with a UTF-8 byte order mark and Windows line endings, with text in eight scripts, emoji, a .café class and a \20AC escape.

  • Checking tools that choke on a BOM or CRLF
  • Spotting encoding bugs in the CSS output
  DownloadOpen

• 100 KB Less file

  sample-100kb.less · 100 KB (102,400 bytes)

  1,122 generated colour swatches, each with a variable, a mixin call and an operation, padded with a comment to exactly 102,400 bytes. It compiles to about 104 KB of CSS.

  • Upload and size-limit tests
  • Compiler performance
  DownloadOpen

Ways to test with them

• Compiler output: compile sample-styles.less and compare with sample-styles.css. Differences point to another Less version or different options.
• Maths mode: compile sample-math.less. If b comes out as 12px and grid-area as a number, the build is using --math=always.
• Encoding: compile sample-windows.less. The CSS should show every script unchanged; any Ã or â€ means a step misread UTF-8.
• Upload limits: sample-100kb.less is exactly 102,400 bytes, for testing a limit at the boundary.

Free to use for testing, teaching and demos, commercially or not, with no attribution needed. A link back to this page is always appreciated.

Questions

Less files, frequently asked