sass Variables Variable Scope


Example

Variables exist within a specific scope, much like in in JavaScript.

If you declare a variable outside of a block, it can be used throughout the sheet.

$blue: dodgerblue;

.main {
    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue;
}

If you declare a variable within a block, it can only be used in that block.

.main {
    $blue: dodgerblue;

    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue; // throws a variable not defined error in SASS compiler
}

Variables declared at the sheet level (outside of a block) can also be used in other sheets if they are imported.