Less Setup and Basics — Complete Guide

DodaTech Updated 2026-06-28 6 min read

In this tutorial, you will learn about Less Setup and Basics. We cover key concepts, practical examples, and best practices to help you master this topic.

Less is a Css Preprocessor using @ prefixes for variables, mixins without keywords, and optional braces for concise responsive stylesheets.

What You'll Learn

Installing and compiling Less
Less syntax and differences from Sass
Variable declaration with @
Basic nesting
Mixins without @mixin keyword
Key differences from Sass

Why It Matters

Less is used by Bootstrap and other major frameworks
Different syntax offers different tradeoffs
Understanding multiple preprocessors is valuable
Some projects inherit Less codebases

Real-World Use

Bootstrap 5 uses Less for its source files
A legacy project uses Less with Grunt compilation
A team migrated from Less to Sass for new features
A component library supports both Less and Sass

flowchart LR
  A[Less] --> B[Variables @]
  A --> C[Mixins]
  A --> D[Nesting]
  A --> E[Functions]
  B --> F[@primary: #0066CC]
  C --> G[.mixin-name() { }]

Less Basics

Code Example: Installation and Compilation

# Install Less globally
npm install -g less

# Install as dev dependency
npm install --save-dev less

# Compile a file
lessc styles.less styles.css

# Compile with compression
lessc styles.less styles.min.css --clean-css

# Watch for changes (requires nodemon or npm-watch)
# lessc does not have built-in watch mode

# With package.json scripts

{
    "scripts": {
        "build:less": "lessc src/less/main.less dist/css/main.css",
        "build:less:min": "lessc src/less/main.less dist/css/main.min.css --clean-css",
        "watch:less": "nodemon -e less -x 'npm run build:less'"
    }
}

// main.less - Entry point
@import 'variables';
@import 'mixins';
@import 'components/button';
@import 'components/card';

Expected output: lessc compiles .less files to .css. Less does not have a built-in watch mode, so nodemon or build tools are needed for automatic compilation.

Code Example: Variables and Nesting

// Variables use @ prefix (not $ like Sass)
@primary: #0066CC;
@secondary: #6c757d;
@font-stack: 'Inter', system-ui, sans-serif;
@spacing-unit: 8px;
@border-radius: 4px;

// Variable interpolation (for selectors and properties)
@selector: card;
@property: margin;
@size: 16px;

.@{selector} {
    @{property}: @size;
    background: @primary;
    font-family: @font-stack;
    border-radius: @border-radius;

    // Nesting (same as Sass)
    &__title {
        font-size: 1.25rem;
        color: @primary;
    }

    &__text {
        color: @secondary;
    }

    // Pseudo-classes with &
    &:hover {
        box-shadow: 0 4px 12px fade(@primary, 20%);
    }

    // Media query nesting (Less supports this too)
    @media (min-width: 768px) {
        display: flex;

        &__image {
            width: 200px;
        }
    }
}

// Lazy evaluation
@variable: 10px;
.element {
    width: @variable;
}
@variable: 20px;  // Overrides earlier usage? NO - Less is lazy
// .element width = 20px (uses the LAST declared value)

Expected output: Variables use @ syntax. Nesting and & work like Sass. Less uses lazy evaluation - variables use the last assigned value regardless of declaration order.

Code Example: Mixins in Less

// Mixin (no @mixin keyword - just a class-like definition)
.button-base() {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    min-height: 44px;
}

// Mixin with parameters
.button-variant(@bg, @color: #fff) {
    .button-base();  // Include another mixin
    background: @bg;
    color: @color;

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

// Usage
.btn-primary {
    .button-variant(#0066CC);
}

.btn-secondary {
    .button-variant(#6c757d);
}

.btn-outline {
    .button-variant(transparent, #0066CC);
    border: 2px solid #0066CC;
}

// Mixin with variable arguments
.box-shadow(@shadows...) {
    box-shadow: @shadows;
}

.element {
    .box-shadow(0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05));
}

// Namespaced mixins
#utils {
    .center() {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sr-only() {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
    }
}

.header {
    #utils.center();
}

.skip-link {
    #utils.sr-only();
}

Expected output: Mixins in Less are defined like classes with parentheses. They can include other mixins, accept parameters with defaults, and be namespaced.

Less vs Sass Key Differences

Code Example: Comparison

// === LESS ===
@primary: #0066CC;

// Mixin (class-like)
.border-radius(@radius: 4px) {
    border-radius: @radius;
}

// Extend (like @extend)
.message {
    padding: 1rem;
    border: 1px solid #eee;
}
.error {
    &:extend(.message);
    color: red;
}

// Built-in functions
.element {
    color: darken(@primary, 10%);
    background: lighten(@primary, 40%);
    width: percentage(0.75);
}

// Math (automatic unit handling)
.element {
    width: 100% / 3;   // 33.33333%
    padding: 8px * 2;  // 16px
}

// === SASS ===
$primary: #0066CC;

// Mixin (keyword-based)
@mixin border-radius($radius: 4px) {
    border-radius: $radius;
}

// Extend (directive-based)
.message {
    padding: 1rem;
    border: 1px solid #eee;
}
.error {
    @extend .message;
    color: red;
}

// Built-in functions (module-based in modern Sass)
.element {
    color: darken($primary, 10%);
    background: lighten($primary, 40%);
    width: percentage(0.75);
}

// Math (math.div required in modern Sass)
.element {
    width: math.div(100%, 3);
    padding: 8px * 2;
}

Expected output: Less uses @ for variables, class-like mixins, and &:extend(). Sass uses $ for variables, @mixin/@include, and @extend. Less has built-in watch mode and is simpler to set up.

Common Mistakes

Confusing Less @variables with Sass $variables — Less uses @. Sass uses $. This is the most common syntax mistake when switching.
Forgetting parentheses in mixins — .mixin (without parentheses) outputs CSS. .mixin() (with parentheses) is a mixin.
Expecting Sass-style scope — Less uses lazy evaluation and different scoping rules than Sass.
Not using clean-css for compression — lessc does not have built-in compression. Install clean-css plugin or use a build tool.
Assuming Sass modules exist in Less — Less does not have @use, @forward, or namespaced modules. Everything is global by default.
Using @import the Sass way — Less @import is different. It does not namespace by default.
No native watch mode — lessc lacks --watch. Use watchers or build tool integration.

Practice Questions

What prefix does Less use for variables? The @ symbol (e.g., @primary: #0066CC).
How do you define a mixin in Less? .mixin-name() { ... } and call with .mixin-name();.
What is the Less equivalent of Sass @extend? The &:extend() directive.
How do you watch Less files for changes? lessc has no built-in watch. Use nodemon, Webpack, or Gulp.

FAQ

Is Less easier than Sass?

Less has a simpler syntax (CSS-compatible, no @mixin keyword). Sass has a more powerful module system and larger ecosystem. Choose based on project needs.

Does Bootstrap use Less or Sass?

Bootstrap 4+ uses Sass. Earlier versions used Less. Many legacy Bootstrap 3 projects still use Less.

Can I mix Less and Sass in the same project?

Technically yes with separate build pipelines, but it is not recommended. Pick one preprocessor per project.

Mini Project

Set up a Less project from scratch. Install Less via npm. Create a directory structure with main.less, _variables.less, _mixins.less, and components/ _button.less and _card.less. Create: variables for colors and spacing, a .button-variant() mixin with parameters, a .card-base() mixin, and a responsive mixin using Less guards (@media). Compile with lessc. Set up a watch script using nodemon. Create two component examples that use the mixins. Compare the Less syntax to the equivalent Sass code you wrote in previous lessons.

What's Next

Continue with Lesson 20: Less Variables and Scope for a deeper look at Less variable behavior.

← Previous Sass Theming — Complete Guide Next → Less Variables and Scope — Complete Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Css Preprocessors