Variable interpolation with #{} in SASS - Browser Rendering Trace

Render Flow - Variable interpolation with #{}

Read SASS file

↓

Parse variables

↓

Detect #{} interpolation

↓

Replace #{} with variable value

↓

Generate CSS output

↓

Browser renders CSS

The SASS compiler reads the file, replaces #{variable} with its value, then outputs CSS that the browser renders visually.

Render Steps - 4 Steps

Code Added:$color: blue;

Before

[box]
Hello

→

After

[box]
Hello

Variable $color is defined but no styles applied yet, so no visual change.

🔧 Browser Action:SASS compiler stores variable, no CSS output yet.

Code Sample

A blue colored box with blue border and some padding around the text.

SASS

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

SASS

$color: blue;

.box {
  color: #{$color};
  border: 2px solid #{$color};
  padding: 1rem;
}

Render Quiz - 3 Questions

After step 2, what visual change do you see in the box?

A Border appears around the box

B Padding is added inside the box

C Text color changes to blue

D No visual change

Common Confusions - 2 Topics

Why doesn't #{$color} work outside of a property value?

Interpolation #{ } only works inside property values or selectors, not standalone in CSS. It replaces variables inline.

💡 Use #{} only where CSS expects a value or part of a selector.

Why do I see the literal string '#{$color}' in my CSS?

This happens if you forget to use SASS compiler or write #{$color} in plain CSS. The browser can't replace it.

💡 Always compile SASS to CSS before using in browser.

Property Reference

Property	Value Applied	Effect	Common Use
color	blue	Changes text color to blue	Text styling
border	2px solid blue	Adds a blue border around element	Visual boundary
padding	1rem	Adds space inside element edges	Spacing content

Concept Snapshot

SASS #{ } interpolation inserts variable values inside CSS. Use inside property values or selectors. Example: color: #{$color}; replaces with variable value. Must compile SASS to CSS for browser to understand. Visual effect: dynamic styling with variables.