Less Syntax

Less Syntax

Less: Basic Syntax

Less 48,928 (current release 4.9.1) is written in JavaScript and can even compile in the browser, which made it the language of Bootstrap 3 2,007 . Comments, nesting, & and nested @media work as in Sass 22,539 (Sass Syntax), so this example shows only what differs: variables start with @, and a mixin is any rule you call.

card.less: import, lazy variables, extend, mixins, guards, detached rulesetsSass

@import (reference) "tokens.less"; // provides @brand; prints no CSS
.card {
  padding: @gap (@gap * 2);        // lazy: @gap is defined below
  &:extend(.shadow);
  .rounded();
  .contrast(@brand);
}
@gap: 1rem;
.rounded(@r: 4px) { border-radius: @r; }
.shadow { box-shadow: 0 1px 3px #0003; }
.contrast(@bg) when (lightness(@bg) >= 50%) { color: black; }
.contrast(@bg) when (default()) { color: white; background: @bg; }
@desktop: { .nav { display: flex; } };
.respond(@rules) { @media (width >= 60rem) { @rules(); } }
.respond(@desktop);

Compiled CSS: npx lessc card.lessCSS

.card {
  padding: 1rem 2rem;
  border-radius: 4px;
  color: white;
  background: #1565c0;
}
.shadow,
.card {
  box-shadow: 0 1px 3px #0003;
}
@media (width >= 60rem) {
  .nav {
    display: flex;
  }
}

The last definition of a variable in a scope wins, and @{name} interpolates. Less 4 divides only inside parentheses: (10px / 2) is 5px. A mixin defined with () prints nothing until called. Guards (when, and, not, default()) replace @if, recursion or each() replace loops, and a detached ruleset called as @rules() does the job of @content. Since Less 3.5 a ruleset also works as a map: @z[toast].

MENU