Default values with !default in SASS - Browser Rendering Trace

Render Flow - Default values with !default

Read variable declaration with !default

↓

Check if variable is already set

↓

If not set, assign default value

↓

Use variable value in styles

↓

Compile to CSS

Sass reads variables with !default and assigns them only if they are not already set, then uses these values when compiling CSS.

Render Steps - 3 Steps

Code Added:$box-color: blue !default;

Before

[ ]
(empty, no styles applied)

→

After

[ ]
(empty, variable set internally, no visible change)

The variable $box-color is set to blue only if it was not set before, but no visible change yet.

🔧 Browser Action:Stores variable value internally during Sass compilation

Code Sample

A blue box with white text, using a default variable color that can be overridden.

SASS

<div class="box">Default color box</div>

SASS

$box-color: blue !default;

.box {
  background-color: $box-color;
  width: 10rem;
  height: 5rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

Render Quiz - 3 Questions

After applying step 2, what color is the box background?

A Red

B Blue

C Transparent

D Black

Common Confusions - 2 Topics

Why doesn't my variable change when I set it after the !default declaration?

Because !default only assigns the value if the variable is not set yet. Setting the variable after the !default line has no effect on the already assigned value (see render_step 3).

💡 Always set variables BEFORE the !default declaration to override defaults.

What happens if I don't set the variable at all?

The variable gets the default value from the !default declaration and styles use that value (see render_step 2).

💡 !default ensures a fallback value if none is provided.

Property Reference

Property	Value	Effect	When Used
$variable: value;	No !default	Always sets variable to value	When you want to force a value
$variable: value !default;	With !default	Sets variable only if not set before	To provide fallback or default values
Variable override	Set variable before !default	Overrides default value	To customize styles before importing

Concept Snapshot

$variable: value !default; sets a variable only if it is not already set. Use it to provide fallback values. If variable is set before, !default does nothing. Variables control styles during Sass compilation. Overrides must happen before !default line.