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

Need a 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

Need a 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
}

Need a 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

Need a 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.