Variable scope (global vs local) in SASS - Browser Rendering Compared

Render Flow - Variable scope (global vs local)

Parse SASS file

↓

Identify variables

↓

Determine scope: global or local

↓

Apply variable values in styles

↓

Compile to CSS

↓

Render styles in browser

The SASS compiler reads the file, finds variables, decides if they are global or local, then applies their values to styles before creating the final CSS that the browser shows.

Render Steps - 3 Steps

Code Added:$color: blue;

Before

[No styles applied]
[Text appears black by default]

→

After

[No visible change yet]
[Variable $color is set globally to blue]

Defines a global variable $color with value blue, but no styles use it yet.

🔧 Browser Action:Stores global variable in SASS environment, no CSS output yet

Code Sample

A blue paragraph and a red box text show how local and global variables affect colors.

SASS

<p>Paragraph</p>
<div class="box">Hello</div>

SASS

$color: blue;

.box {
  $color: red !global;
  color: $color;
}

p {
  color: $color;
}

Render Quiz - 3 Questions

After applying step 2, what color is the text inside .box?

A Blue

B Black

C Red

D Green

Common Confusions - 2 Topics

Why does the .box text show red but the paragraph text shows blue?

Because inside .box a local $color variable is set to red, which overrides the global blue only there. Paragraph uses the global blue since it has no local $color.

💡 Local variables override global ones only inside their block.

If I change $color inside .box, does it affect other selectors?

No, local variables inside .box only affect that block. Other selectors still use the global variable.

💡 Local scope is limited to the block where variable is defined.

Property Reference

Variable Scope	Where Defined	Visibility	Effect on Styles	Example
Global	Outside any selector or block	Accessible everywhere	Applies unless overridden locally	$color: blue;
Local	Inside a selector or block	Only inside that block	Overrides global variable inside block	.box { $color: red; }

Concept Snapshot

SASS variables can be global or local. Global variables are set outside blocks and used everywhere. Local variables are set inside blocks and override global ones only there. Local scope limits variable visibility to that block. Use local variables to customize styles without changing global values.