Variable scope (global vs local) in SASS - Quick Revision & Key Differences

Recall & Review

beginner

What is a global variable in Sass?

A global variable in Sass is a variable declared outside any selector or function. It can be accessed anywhere in the stylesheet unless overridden by a local variable with the same name.

beginner

What is a local variable in Sass?

A local variable in Sass is a variable declared inside a selector, function, or mixin. It only exists within that block and cannot be accessed outside it.

intermediate

How do you make a local variable affect the global variable in Sass?

You use the !global flag when assigning a variable inside a block. This updates the global variable instead of creating a new local one.

intermediate

What happens if you declare a variable with the same name both globally and locally in Sass?

The local variable overrides the global one inside its block. Outside the block, the global variable value is used.

beginner

Why is understanding variable scope important in Sass?

It helps avoid unexpected styles by controlling where variables can be used or changed. It keeps stylesheets organized and easier to maintain.

Where is a Sass variable declared outside any selector accessible?

A Anywhere in the stylesheet

B Only inside the selector it is declared

C Only inside functions

D Nowhere, it is invalid

A variable declared outside any selector is global and accessible anywhere unless overridden locally.

What does the !global flag do in Sass?

A Creates a new local variable

B Makes a local variable update the global variable

C Deletes the global variable

D Prevents variable usage

The !global flag updates the global variable from inside a local block.

If a variable is declared both globally and locally with the same name, which one is used inside the local block?

A Global variable

B Neither variable

C Both variables

D Local variable

The local variable overrides the global one inside its block.

Can a local variable in Sass be accessed outside its block?

A Yes, always

B Only if declared with !global

C No, never

D Only inside functions

Local variables exist only inside their block and cannot be accessed outside.

Why should you be careful with variable scope in Sass?

A To avoid unexpected style changes

B To make CSS slower

C To increase file size

D To disable variables

Understanding scope helps avoid unexpected style changes and keeps code organized.

Explain the difference between global and local variables in Sass and how the !global flag works.

Think about where variables can be used and changed.

Describe a real-life example where variable scope in Sass helps keep your styles organized.

Imagine managing colors or sizes in a big project.