Variable scope (global vs local) in SASS - Hands-On Comparison

Variable scope (global vs local) in Sass

📖 Scenario: You are creating a simple stylesheet for a website. You want to use Sass variables to control colors. You will learn how variables behave inside and outside of Sass blocks like @mixin and @function.

🎯 Goal: Build a Sass file that shows how global and local variables work by defining a global color variable, changing it locally inside a mixin, and using both values in styles.

📋 What You'll Learn

Create a global variable $main-color with the value #3498db

Create a variable $local-color inside a mixin with the value #e74c3c

Use !global to change the global $main-color inside the mixin

Apply styles to a class .box using the global $main-color

Apply styles to a class .alert using the local $local-color inside the mixin

💡 Why This Matters

🌍 Real World

Using variables in Sass helps keep colors and styles consistent and easy to update across a website.

💼 Career

Understanding variable scope in Sass is important for front-end developers working with CSS preprocessors to write maintainable and scalable stylesheets.

1

Create a global color variable

Create a global Sass variable called $main-color and set it to the color #3498db.

SASS

# Create a global variable $main-color with value #3498db
# Your code here

Hint

Use $main-color: #3498db; to create a global variable.

2

Create a mixin with a local variable

Create a mixin called alert-style. Inside it, create a local variable called $local-color and set it to #e74c3c.

SASS

$main-color: #3498db;

// Create mixin alert-style with local variable $local-color set to #e74c3c
// Your code here

Hint

Use @mixin alert-style { $local-color: #e74c3c; } to create the mixin and local variable.

3

Change the global variable inside the mixin

Inside the alert-style mixin, add a line to change the global $main-color to #2ecc71 using !global.

SASS

$main-color: #3498db;

@mixin alert-style {
  $local-color: #e74c3c;
  // Change $main-color to #2ecc71 globally
  // Your code here
}

Hint

Use $main-color: #2ecc71 !global; inside the mixin to update the global variable.

4

Use variables in styles and include the mixin

Create a class .box that uses the global $main-color as its background color. Create a class .alert that includes the alert-style mixin and uses the local $local-color as its background color.

SASS

$main-color: #3498db;

@mixin alert-style {
  $local-color: #e74c3c;
  $main-color: #2ecc71 !global;
}

// Create .box with background-color $main-color
// Create .alert that includes alert-style and uses $local-color as background-color
// Your code here

Hint

Use .box { background-color: $main-color; } and inside the mixin define .alert { background-color: $local-color; }. Then include the mixin with @include alert-style; before the .box rule.

Practice

1. Which statement about Sass variable scope is true?
$color: red; declared outside any block means:

easy

A. The variable cannot be used unless declared inside a selector.

B. The variable is local and only works inside the block it is declared in.

C. The variable is global and can be used anywhere in the stylesheet.

D. The variable must be declared with !local to be used globally.

Solution

1. Step 1: Understand where the variable is declared

   The variable $color: red; is declared outside any selector or block, making it global.

2. Step 2: Recall Sass variable scope rules

   Global variables can be accessed anywhere in the stylesheet, inside or outside blocks.

3. Final Answer:

   The variable is global and can be used anywhere in the stylesheet. -> Option C

4. Quick Check:

   Global variable outside blocks = accessible everywhere [OK]

Hint: Variables outside blocks are global by default [OK]

Common Mistakes:

• Thinking variables outside blocks are local
• Confusing !global with !local
• Assuming variables need special flags to be global

2. Which Sass syntax correctly updates a global variable $font-size inside a nested block?

easy

A. Inside block: $font-size: 2rem;

B. Outside block: $font-size: 2rem !local;

C. Inside block: !global $font-size: 2rem;

D. Inside block: $font-size: 2rem !global;

Solution

1. Step 1: Identify how to update global variables inside blocks

   To update a global variable inside a nested block, you must add !global after the value.

2. Step 2: Check each option's syntax

   Inside block: $font-size: 2rem !global; uses $font-size: 2rem !global; which is correct Sass syntax for updating global variables inside blocks.

3. Final Answer:

   Inside block: $font-size: 2rem !global; -> Option D

4. Quick Check:

   Use !global to update global variables inside blocks [OK]

Hint: Add !global after value to update global inside blocks [OK]

Common Mistakes:

• Forgetting !global and only assigning value locally
• Using !local which is invalid
• Placing !global before variable name

3. What color will the p text be in this Sass code?

$color: blue;

p {
  $color: red;
  color: $color;
}

medium

A. Blue

B. Red

C. Undefined (error)

D. Inherits from body

Solution

1. Step 1: Identify variable scopes

   $color is set globally to blue, but inside p block, a local $color is set to red.

2. Step 2: Determine which $color is used in color: $color;

   Inside the block, the local $color (red) overrides the global one.

3. Final Answer:

   Red -> Option B

4. Quick Check:

   Local variable overrides global inside blocks [OK]

Hint: Local variables override global inside blocks [OK]

Common Mistakes:

• Assuming global variable is used inside block
• Thinking Sass throws error for local variable
• Confusing inheritance with variable scope

4. Find the error in this Sass code that tries to update a global variable inside a nested block:

$padding: 10px;

.container {
  $padding: 20px;
  padding: $padding;
}

medium

A. Missing !global to update the global variable inside the block.

B. Variable $padding cannot be used inside blocks.

C. Global variables cannot be declared outside blocks.

D. The syntax for variable declaration is incorrect.

Solution

1. Step 1: Analyze variable update inside block

   The code declares $padding: 20px; inside .container block without !global, so it creates a local variable instead of updating the global one.

2. Step 2: Identify correct way to update global variable

   To update the global $padding inside the block, !global must be added: $padding: 20px !global;.

3. Final Answer:

   Missing !global to update the global variable inside the block. -> Option A

4. Quick Check:

   Use !global to update global variables inside blocks [OK]

Hint: Add !global to update global variables inside blocks [OK]

Common Mistakes:

• Assuming local assignment updates global variable
• Thinking variables can't be used inside blocks
• Confusing variable declaration syntax

5. Given this Sass code, what will be the final value of $margin after compilation?

$margin: 5px;

.wrapper {
  $margin: 10px !global;
  .content {
    $margin: 15px;
  }
}

body {
  margin: $margin;
}

hard

A. 10px

B. 5px

C. 15px

D. Compilation error

Solution

1. Step 1: Track global variable changes

   Initially, $margin is 5px globally. Inside .wrapper, $margin: 10px !global; updates the global variable to 10px.

2. Step 2: Check nested block .content

   Inside .content, $margin: 15px; is local to that block and does not affect the global variable.

3. Step 3: Determine value used in body

   The body selector uses the global $margin, which was updated to 10px.

4. Final Answer:

   10px -> Option A

5. Quick Check:

   !global updates global variable; local inside nested blocks doesn't [OK]

Hint: !global updates global; nested local variables don't affect global [OK]

Common Mistakes:

• Assuming nested local variable changes global
• Confusing variable values inside nested blocks
• Expecting compilation error due to variable shadowing