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
What are lighten() and darken() functions good for in Sass?
Sass JuniorWhat is Interpolation in Sass and when would you use it?
Sass JuniorWhat Sass variable scopes do you know and what are the differences between them?
Sass JuniorIn Sass, what comments are compiled into CSS and what comments are not?
Sass JuniorWhat operators can you use in Sass expressions?
Sass Junior