Responsive breakpoint mixin patterns in SASS - Browser Rendering Trace

Render Flow - Responsive breakpoint mixin patterns

[Write SASS mixin] -> [Compile to CSS media query] -> [Browser reads CSS] -> [Apply styles inside media query] -> [Render layout changes] -> [Repaint and composite]

The browser reads the compiled CSS with media queries generated by SASS mixins. It applies styles conditionally based on viewport size, then repaints the layout accordingly.

Render Steps - 4 Steps

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

Before

→

After

[ box: Responsive Box ]
[ width: 100% ]
[ background: lightblue ]

The box appears full width with a light blue background as the base style.

🔧 Browser Action:Creates DOM element and applies base CSS styles.

Code Sample

A box changes its background color based on screen width using SASS mixins that generate media queries.

SASS

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

SASS

@mixin respond($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == medium {
    @media (min-width: 601px) and (max-width: 900px) { @content; }
  } @else if $breakpoint == large {
    @media (min-width: 901px) { @content; }
  }
}

.box {
  width: 100%;
  background-color: lightblue;
  @include respond(small) {
    background-color: lightcoral;
  }
  @include respond(medium) {
    background-color: lightgreen;
  }
  @include respond(large) {
    background-color: lightgoldenrodyellow;
  }
}

Render Quiz - 3 Questions

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

A lightgreen

B lightcoral

C lightgoldenrodyellow

D lightblue

Common Confusions - 2 Topics

Why doesn't my style inside the mixin apply on all screen sizes?

Because the styles are inside media queries generated by the mixin, they only apply when the viewport matches the breakpoint conditions (see render_steps 2-4).

💡 Styles inside breakpoint mixins only show up when the screen size fits the media query.

Why do styles from larger breakpoints override smaller ones?

Because CSS applies the last matching rule, and media queries for larger breakpoints come later or have higher specificity (see render_steps 3 and 4).

💡 Later media queries can override earlier ones if both match the viewport.

Property Reference

Mixin Name	Breakpoint	Media Query	Visual Effect	Common Use
respond(small)	small	(max-width: 600px)	Applies styles on small screens	Mobile-first styling
respond(medium)	medium	(min-width: 601px) and (max-width: 900px)	Applies styles on medium screens	Tablet or small desktop
respond(large)	large	(min-width: 901px)	Applies styles on large screens	Desktop and larger devices

Concept Snapshot

Responsive breakpoint mixins generate media queries in SASS. Use @include respond(size) to apply styles for specific screen widths. Small: max-width 600px, Medium: 601-900px, Large: 901px and up. Styles inside mixins only apply when viewport matches. Order matters: later media queries can override earlier ones.