Think of "scope" like an onion. It has layers and depth to it. Global Scope is the outer most layer of our onion. Then each onion layer is a new scope. In Less, each layer is a set between your selector brackets.

Variable Scope

"Scope" is a common term amongst programming languages. Less supports and it operates almost exactly as it would if you're familiar with it.

Scope basically means:

Table of Contents

    • Check for variables in the current "group" (scope)
    • If that doesn't exist, check for variables in its parent "group" (scope)
    • If that doesn't exist, check for variables in its parent "group" (scope)

    Here it is visually explained:

    // I'm the highest parent "scope". Nothing is above me.
    @color: red;
    
    .kittens {
        color: @color; // Will be red
    }
    
    .puppies {
        @color: black;
        color: @color; // Will be black
    
        .wee-man {
            color: @color; // Will be black
        }
    
        .wee-man {
            color: @color; // Will be pink
    
            span {
                color: @color; Will be pink
            }
    
            @color: pink; // Lazy Evaluation?! Order doesn't matter on variable declaration
        }
    }