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.