Less Nesting and Scope — Complete Guide

DodaTech Updated 2026-06-28 6 min read

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

Less nesting mirrors HTML structure with the & parent selector, extends for inheritance, and unique scope bubbling for responsive and nested styles.

What You'll Learn

Basic nesting rules
The & parent selector
The &:extend() directive
Nested media queries and scope bubbling
@import behavior in nested contexts
Nested rulesets and detached rulesets

Why It Matters

Nesting improves readability and structure
Extend reduces CSS repetition
Scope bubbling simplifies responsive code
Understanding nesting limits prevents errors

Real-World Use

A component nests all related elements
A utility extends base styles with &:extend
A responsive component nests media queries
A theme file uses extend for variation

flowchart LR
  A[Less Nesting] --> B[Child Selectors]
  A --> C[& Parent Ref]
  A --> D[:extend]
  A --> E[Scope Bubbling]
  B --> F[.parent .child]
  C --> G[&:hover, &__element]
  D --> H[Inheritance]
  E --> I[@media hoisted to root]

Nesting in Less

Code Example: Basic Nesting and &

// Basic nesting (same as Sass)
.nav {
    background: #333;
    padding: 0 1rem;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    li {
        margin: 0;
    }

    a {
        color: #fff;
        text-decoration: none;
        padding: 0.75rem 1rem;
        display: block;
        min-height: 44px;
        display: flex;
        align-items: center;

        // & refers to the parent selector (a)
        &:hover {
            text-decoration: underline;
        }

        &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            background: currentColor;
            border-radius: 50%;
            margin-right: 0.5rem;
        }
    }

    // Direct child combinator
    > .nav-brand {
        font-weight: bold;
        font-size: 1.25rem;
    }

    // Adjacent sibling
    li + li {
        margin-left: 0.5rem;
    }

    // & with class (no space = same element)
    &.is-sticky {
        position: fixed;
        top: 0;
        width: 100%;
    }
}

// & at the end
.nav-item {
    .nav-header & {
        font-weight: bold;
    }
}
// Compiles to: .nav-header .nav-item { font-weight: bold; }

Expected output: Nesting in Less is functionally identical to Sass. The & parent selector creates compound selectors, pseudo-classes, and sibling combinators.

Code Example: &:extend

// Extend in Less (similar to Sass @extend)
.message {
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid transparent;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.error {
    &:extend(.message);
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.warning {
    &:extend(.message);
    background: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

// Extend with all (nested patterns)
// Without "all", only the top-level selector is extended
// With "all", nested selectors are also extended

.base-styles {
    color: #333;

    a {
        color: #0066CC;
    }
}

.extended {
    &:extend(.base-styles all);
    // Extends both .base-styles and .base-styles a
}

// Extend multiple selectors
.success {
    &:extend(.message, .base-styles);
    background: #d4edda;
    color: #155724;
}

// Extend with placeholder-like pattern
// (Less does not have % placeholder selectors, use a class instead)

Expected output: &:extend() is Less's equivalent of Sass @extend. The all keyword extends nested selectors too. Multiple extends can be comma-separated.

Code Example: Scope Bubbling

// Scope bubbling: media queries inside selectors bubble to the top
// This is a unique Less feature

.card {
    background: #fff;
    padding: 1rem;

    @media (min-width: 768px) {
        display: flex;
        padding: 2rem;

        &__image {
            width: 200px;
        }

        @media (min-width: 1024px) {
            &__image {
                width: 300px;
            }
        }
    }

    @media print {
        & {
            background: #fff;
            color: #000;
        }
    }
}

// Compiled CSS (media queries bubble to root):
// .card { background: #fff; padding: 1rem; }
// @media (min-width: 768px) { .card { display: flex; padding: 2rem; } }
// @media (min-width: 768px) { .card__image { width: 200px; } }
// @media (min-width: 768px) and (min-width: 1024px) { .card__image { width: 300px; } }
// @media print { .card { background: #fff; color: #000; } }

// Scope bubbling with &:hover and media
.button {
    color: #0066CC;

    @media (hover: hover) {
        &:hover {
            color: darken(#0066CC, 10%);
        }
    }
}
// Compiled:
// .button { color: #0066CC; }
// @media (hover: hover) { .button:hover { color: #0052a3; } }

Expected output: Less "bubbles" nested media queries to the root while maintaining the full selector context. This means media queries appear at the root level but the selector includes all parent selectors from the nesting.

Code Example: Nested Rulesets and Detached Rulesets

// Detached ruleset (variable containing styles)
@card-styles: {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
};

// Apply detached ruleset
.card {
    @card-styles();

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

// Detached ruleset with parameters
@responsive-card: {
    .card {
        @media (min-width: 768px) {
            display: flex;
        }
    }
};

@responsive-card();  // Apply

// Pass detached ruleset to mixin
.mixin-with-styles(@styles) {
    color: #333;

    @styles();  // Apply the passed styles
}

.element {
    .mixin-with-styles({
        background: #f8f9fa;
        padding: 1rem;
    });
}
// Compiled:
// .element { color: #333; background: #f8f9fa; padding: 1rem; }

// Merging rulesets
@base: {
    color: #333;
};

@extended: {
    @base();  // Include base
    font-size: 1rem;
};

Expected output: Detached rulesets store CSS declarations in variables. They can be applied with the () call syntax, passed to mixins, and merged together. This provides a composable pattern similar to Sass's @content but different in approach.

Common Mistakes

Expecting Sass-like extend syntax — Less uses &:extend() inside the ruleset, not @extend outside.
Not understanding scope bubbling — Media queries inside selectors bubble to root. This means they are NOT nested in the output, which can be surprising.
Using "all" unnecessarily — The "all" keyword extends all nested selectors from the source. Without it, only the top-level is extended.
Forgetting to call detached rulesets — A detached ruleset variable must be called with () to be applied.
Over-nesting media queries — Nested media queries bubble separately, creating duplicate @media rules. Use a single responsive mixin instead.
Conflict between nesting and & — & inside deeply nested blocks can produce long selectors. Keep nesting to 3-4 levels.
Not using @import for partials — While Less supports @import, it does not namespace like Sass @use. Everything is global.

Practice Questions

What is the Less equivalent of Sass @extend? &:extend(.class) inside the ruleset.
How does scope bubbling work in Less? Nested media queries are hoisted to the root level while the full selector is preserved.
What is a detached ruleset? A variable containing CSS declarations, applied with @variable(); syntax.
What does the "all" keyword do in &:extend? It extends all nested selectors from the source, not just the top-level selector.

FAQ

What is the difference between Less &:extend and Sass @extend?

Less uses &:extend() inside the ruleset. Sass uses @extend outside. Both achieve the same selector grouping.

Can I nest @media queries in Less?

Yes. Less bubbles them to the root. This is different from Sass which keeps them nested in the output.

Are detached rulesets like Sass variables?

Detached rulesets are unique to Less. They allow storing and composing style blocks, similar to but more powerful than a mixin.

Mini Project

Build a component library using Less nesting, extend, and scope bubbling. Create 3 components (button, card, modal) that use nesting for structure. Use &:extend() to create variant styles (e.g., button extends .btn-base). Nest media queries inside components (scope bubbling). Create a detached ruleset for common animations (@keyframes). Use a mixin that accepts a detached ruleset for custom button styles. Compile the output and verify that: (1) media queries are bubbled correctly, (2) extends group selectors correctly, (3) nesting is within 3 levels, and (4) detached rulesets apply correctly.

What's Next

Continue with Lesson 23: Less Functions and Operations to learn built-in functions in Less.

← Previous Less Mixins — Complete Guide Next → Less Functions and Operations — Complete Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Css Preprocessors