Conditional mixins with @if in SASS - Browser Rendering Trace

Render Flow - Conditional mixins with @if

Read @mixin with parameter

↓

Parse @if condition inside mixin

↓

Evaluate condition at call time

↓

Include styles if condition true

↓

Skip styles if condition false

↓

Compile CSS output

The browser sees the final CSS after Sass processes the mixin. Sass reads the mixin, checks the @if condition when called, and includes styles only if the condition is true. The browser renders the resulting CSS normally.

Render Steps - 3 Steps

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

Before

[Empty page]

→

After

[ ] (empty box, no styles applied)

The HTML element exists but has no visible styles yet, so it looks like an empty space.

🔧 Browser Action:Creates DOM node for div.box

Code Sample

A box with blue background and white text appears because the 'primary' style is included by the conditional mixin.

SASS

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

SASS

@mixin box-style($type) {
  @if $type == 'primary' {
    background-color: blue;
    color: white;
  } @else if $type == 'secondary' {
    background-color: gray;
    color: black;
  }
}

.box {
  @include box-style('primary');
}

Render Quiz - 3 Questions

After applying step 3, what background color does the box have?

A White

B Gray

C Blue

D No color

Common Confusions - 2 Topics

Why doesn't the box change color when I use a different $type value?

The mixin only applies styles if the $type matches 'primary' or 'secondary'. If you pass a different value, no styles are included, so the box stays unstyled (see render_step 3).

💡 Only conditions that match true add styles; others are ignored.

Why do I see no styles if I forget to include the mixin?

Defining a mixin alone does not apply styles. You must include it in a selector to see any visual effect (see render_step 2 vs 3).

💡 Mixins define styles; @include applies them.

Property Reference

Property	Value Applied	Condition	Visual Effect	Common Use
background-color	blue	$type == 'primary'	Box background turns blue	Highlight primary elements
color	white	$type == 'primary'	Text color becomes white	Improve contrast on blue background
background-color	gray	$type == 'secondary'	Box background turns gray	Style secondary elements
color	black	$type == 'secondary'	Text color becomes black	Standard text on gray background

Concept Snapshot

Conditional mixins use @if to apply styles only when conditions match. Define mixins with parameters and @if blocks. Include mixins with @include and pass arguments. Only matching conditions add CSS to output. Useful for reusable, flexible styling. No visual change until mixin is included.