What is Less CSS Preprocessor?

What is Less?

Less (Leaner Style Sheets) is a CSS preprocessor that adds variables, mixins, nesting, and functions. It compiles to standard CSS and was famously used by Bootstrap 3.

Variables (use @)

@primary: #2563eb;
@padding: 16px;

.button {
  background: @primary;
  padding: @padding;
}

Nesting

.nav {
  ul { margin: 0; }
  a {
    color: #333;
    &:hover { color: @primary; }
  }
}

Mixins

.rounded(@radius: 5px) {
  border-radius: @radius;
}
.card { .rounded(10px); }

Why Use Less?

• Familiar CSS-like syntax.
• Can run in the browser or compile via Node.
• Simple learning curve.

FAQs

Less or SCSS?

SCSS has a larger community today; Less uses @ for variables vs SCSS's $. More in our Less guides.

How do I compile Less?

Use the lessc CLI or a build tool.