Variable scope (global vs local) in SASS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding variable scope in Sass

What will be the value of $color after compiling this Sass code?

SASS

$color: blue;

@mixin change-color() {
  $color: red;
}

@include change-color();

body {
  color: $color;
}

A undefined variable error

B red

C blue

D empty string

💡 Hint

Think about whether the variable inside the mixin changes the global variable or just a local copy.

In Sass, variables inside mixins are local by default. The $color inside change-color does not affect the global $color. So, the body color remains blue.

📝 Syntax

intermediate

Using !global to change variable scope

What will be the color of the p element after compiling this Sass code?

SASS

$font-size: 12px;

@mixin set-font() {
  $font-size: 16px !global;
}

@include set-font();

p {
  font-size: $font-size;
}

A 16px

B 12px

C error: !global not allowed here

D 0px

💡 Hint

The !global flag changes the variable in the global scope.

Using !global inside the mixin updates the global $font-size variable to 16px. So, the p element uses 16px font size.

❓ rendering

advanced

Effect of variable scope on nested selectors

Given this Sass code, what color will the .container .title text be in the compiled CSS?

SASS

$text-color: black;

.container {
  $text-color: green;
  .title {
    color: $text-color;
  }
}

.title {
  color: $text-color;
}

A green for .container .title, black for .title

B black for both .container .title and .title

C green for both .container .title and .title

D error: $text-color undefined in .title

💡 Hint

Variables inside a selector are local to that selector and its children.

Inside .container, $text-color is green locally, so .container .title uses green. Outside, $text-color is black, so .title uses black.

❓ selector

advanced

Variable scope impact on @function output

What will be the output of colorize() function when called in this Sass code?

SASS

$base-color: blue;

@function colorize() {
  $base-color: red;
  @return $base-color;
}

.result {
  color: colorize();
}

A blue

B error: cannot redefine $base-color

C undefined

D red

💡 Hint

Variables inside functions are local unless marked global.

Inside the function, $base-color is locally set to red. The function returns this local value, so the color is red.

❓ accessibility

expert

Ensuring accessible color variables with global scope

You want to define a global color variable for accessible text contrast in Sass. Which approach correctly sets a global variable that can be used anywhere, including inside mixins and functions?

A $accessible-color: #000;

B $accessible-color: #000 !global;

C @function get-accessible-color() { $accessible-color: #000; @return $accessible-color; }

D @mixin set-accessible-color() { $accessible-color: #000; } @include set-accessible-color();

💡 Hint

Global variables must be declared with !global if set inside a block.

Option B sets $accessible-color globally with !global. Options B and C set local variables inside mixin/function. Option B sets global only if at root level, but if inside a block it won't be global.