Breakpoint variables and maps in SASS - Browser Rendering Trace

Render Flow - Breakpoint variables and maps

Read SCSS file

↓

Parse variables and maps

↓

Replace variables in CSS rules

↓

Generate media queries from maps

↓

Compile to CSS

↓

Browser applies styles

↓

Render responsive layout

The browser receives compiled CSS with media queries generated from SCSS breakpoint variables and maps, then applies styles to render responsive layouts.

Render Steps - 3 Steps

Code Added:<div class="box">Responsive Box</div>

Before

→

After

[ box ]
| Responsive Box |
Background: lightblue
Padding: 1rem

The box element appears with a light blue background and padding, the default style.

🔧 Browser Action:Creates DOM node and applies base styles

Code Sample

A box changes background color at medium and large screen widths using breakpoint variables from a map.

SASS

<div class="box">Responsive Box</div>

SASS

$breakpoints: (
  "small": 480px,
  "medium": 768px,
  "large": 1024px
);

.box {
  background: lightblue;
  padding: 1rem;
  @media (min-width: map-get($breakpoints, "medium")) {
    background: lightgreen;
  }
  @media (min-width: map-get($breakpoints, "large")) {
    background: lightcoral;
  }
}

Render Quiz - 3 Questions

After applying step 2, what background color does the box have when the viewport is 800px wide?

A Light blue

B Light green

C Light coral

D No background color

Common Confusions - 2 Topics

Why doesn't my media query apply when I use a variable directly?

In SCSS, you must use map-get() to access values inside a map. Using the map variable alone won't work inside media queries.

💡 Use map-get($map, "key") to get breakpoint values for media queries (see render_steps 2 and 3).

Why do my background colors not change when resizing the browser?

The compiled CSS media queries only apply if the viewport width matches the min-width condition. Make sure your browser window is wide enough.

💡 Resize browser wider than breakpoint values to see color changes (render_steps 2 and 3).

Property Reference

Property	Value Applied	Purpose	Visual Effect	Common Use
$breakpoints	Map ("small": 480px, "medium": 768px, "large": 1024px)	Stores screen widths	Used to generate media queries	Responsive design
map-get($breakpoints, "medium")	768px	Accesses breakpoint value	Sets min-width for media query	Change styles at medium screens
@media (min-width: ...)	768px, 1024px	Defines responsive rules	Changes styles based on viewport	Adjust layout/colors/fonts

Concept Snapshot

Breakpoint variables store screen widths in maps. Use map-get() to access values. Apply media queries with min-width using these values. This creates responsive styles that change with screen size. Without media queries, variables alone do not affect layout.