What Sass variable scopes do you know and what are the differences between them?

Experience Level: Junior
Tags: Sass

Answer

Sass has two variable scopes. Global scope and local scope.

  • Global scope variables can be declared outside of a function and a mixin
  • Local scope variables are declared inside of blocks (between curly braces)
$color1: lime;

@mixin box($width, $height) {
  $color2 : blue;
  height: $height;
  width: $width;
  border: solid 1px $color2;
  background: lime;
}

.rectangle {
  @include box(30px, 80px);
}
Related Sass job interview questions
Sass for beginners
Sass for beginners

Are you learning Sass? Try our test we designed to help you progress faster.

Test yourself