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

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a global variable in Sass.

SASS

$color: [1];

Drag options to blanks, or click blank then click option'

Acolor

B#3498db

Cblue

Dfont-size

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name instead of a color value.

Forgetting the dollar sign before the variable name.

The variable $color is assigned the value blue globally.

2fill in blank

medium

Complete the code to override a global variable inside a Sass mixin locally.

SASS

@mixin theme { $color: [1]; .button { color: $color; } }

Drag options to blanks, or click blank then click option'

Ared

B#fff

Cfont-size

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name instead of a color value.

Trying to use a variable without redefining it locally.

The variable $color is locally set to red inside the mixin, overriding the global value.

3fill in blank

hard

Fix the error in the code by correctly updating the global variable inside a Sass function.

SASS

@function update-color() { $color: [1] !global; @return $color; }

Drag options to blanks, or click blank then click option'

Agreen

Bfont-weight

C12px

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name instead of a color value.

Forgetting the !global flag.

The !global flag updates the global $color variable to green inside the function.

4fill in blank

hard

Fill both blanks to create a local variable and use the global variable inside a Sass rule.

SASS

.header { $local-color: [1]; color: $[2]; }

Drag options to blanks, or click blank then click option'

Ared

Bcolor

Cfont-size

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same value for both blanks.

Confusing property names with variable names.

The local variable $local-color is set to red, and the global $color is accessed by filling color to produce color: $color;.

5fill in blank

hard

Fill all three blanks to define a global variable, override it locally, and then update the global variable inside a mixin.

SASS

$color: [1];
@mixin change-color() {
  $color: [2];
  $color: [3] !global;
}

Drag options to blanks, or click blank then click option'

Ablue

Bred

Cgreen

Dfont-size

Attempts:

3 left

💡 Hint

Common Mistakes

Not using !global when updating the global variable.

Using invalid values for colors.

The global variable $color is first set to blue, then locally overridden to red, and finally updated globally to green inside the mixin using !global.