Media query mixin patterns in SASS - Browser Rendering Trace

Render Flow - Media query mixin patterns

[Write SASS mixin] -> [Compile to CSS with media query] -> [Browser reads CSS] -> [Apply styles inside media query if condition matches] -> [Render updated layout]

The browser reads the compiled CSS including media queries. It applies styles inside media queries only if the device matches the conditions, then renders the layout accordingly.

Render Steps - 3 Steps

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

Before

[empty page]

→

After

[___________]
|           |
| Responsive|
|   Box     |
|___________|

Adding the box div creates a visible rectangle with text on the page.

🔧 Browser Action:Creates DOM node and paints default styles

Code Sample

A blue box that changes to coral and full width on screens 600px wide or smaller using a media query mixin.

SASS

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

SASS

@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) {
      @content;
    }
  }
  @else if $breakpoint == tablet {
    @media (min-width: 601px) and (max-width: 900px) {
      @content;
    }
  }
}

.box {
  width: 300px;
  height: 150px;
  background-color: lightblue;
  @include respond-to(mobile) {
    background-color: lightcoral;
    width: 100%;
  }
}

Render Quiz - 3 Questions

After applying step 3 on a screen 500px wide, what visual change do you see?

A Box background stays lightblue and width stays 300px

B Box background changes to lightcoral and width becomes full container width

C Box disappears from the page

D Box text changes to 'Mobile View'

Common Confusions - 2 Topics

Why don't my styles inside the mixin apply on desktop screens?

Because the media query inside the mixin only applies styles when the screen matches the breakpoint condition, e.g., max-width 600px for mobile. On larger screens, those styles are ignored.

💡 Media query styles only show on matching screen sizes (see render_step 3).

Why does the box not resize smoothly when I resize the browser?

The width changes only at the breakpoint boundary because media queries apply or remove styles instantly, not gradually.

💡 Media queries create 'step' changes, not smooth transitions.

Property Reference

Mixin Name	Breakpoint Condition	CSS Output	Visual Effect	Common Use
respond-to(mobile)	max-width: 600px	@media (max-width: 600px) { ... }	Styles apply on small screens, e.g., phones	Mobile responsive design
respond-to(tablet)	min-width: 601px and max-width: 900px	@media (min-width: 601px) and (max-width: 900px) { ... }	Styles apply on medium screens, e.g., tablets	Tablet responsive design

Concept Snapshot

Media query mixins wrap styles inside conditions like max-width. They compile to CSS @media rules. Browser applies styles only if screen matches. Use mixins to keep responsive code clean. Common breakpoints: mobile (≤600px), tablet (601-900px). Styles inside media queries override defaults on matching screens.