In Sass, can you declare two different variables that have the same name and different scope? Describe what happens in such situation.

Experience Level: Junior
Tags: Sass

Answer

Yes, you can. When you declare both global and local variable with the same name, the value of the local variable takes precedence over the global variable. However, if you assign a value to the local variable, the global variable value doesn't get rewritten. This concept is called shadowing.

Sass

$color1: lime;

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

.rectangle {
  @include box(30px, 80px);
}

CSS

.rectangle {
  height: 80px;
  width: 30px;
  border: solid 1px blue;
  background: lime;
}
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