sass Variables Localize Variables with @at-root directive


Example

@at-root directive can be used to localize variables.

$color: blue;

@at-root {
  $color: red;

  .a {
    color: $color;
  }
  .b {
    color: $color;
  }
}

.c {
  color: $color;
}

is compiled to:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}