Computer Magic Logo
Scope

Sunday, June 7, 2015

Published by Aristotelis Pitaridis

Scope in Less is similar to the scope in most of the other programming languages. The compiler looks first the local declarations and if the required value does not exists then it will check the parent scope and so on. The following example demonstrates an example which explains how it works.

@var: red; 
#page { 
    @var: white; 
    #header { 
        color: @var;
    } 
} 
#footer { 
    color: @var;
}

The output of the above code is the following:

#page #header {
    color: white;
}
#footer {
    color: red;
}