Getting Started with Less

Variable Scope

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:

  • 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
    }
}