<===> input.scss
$x: 0;
div {
/* 0 */
font: $x;
$x: 1 !global;
/* 1 */
font: $x;
span {
$x: 2 !global;
/* 2 */
font: $x;
}
/* 2 */
font: $x;
p {
/* 2 */
font: $x;
}
}
div {
@foo {
$y: 2;
font: $y;
}
@bar {
$y: 3;
font: $y;
}
}
@mixin foo() {
content: "foo";
@content;
}
div {
$z: "whatever";
@include foo() {
$z: "block for foo!";
font: fudge;
}
width: $z;
}
<===> output.css
div {
/* 0 */
font: 0;
/* 1 */
font: 1;
/* 2 */
font: 2;
}
div span {
/* 2 */
font: 2;
}
div p {
/* 2 */
font: 2;
}
@foo {
div {
font: 2;
}
}
@bar {
div {
font: 3;
}
}
div {
content: "foo";
font: fudge;
width: "block for foo!";
}