Including mixins with @include in SASS - Browser Rendering Trace

Render Flow - Including mixins with @include

Parse SCSS file

↓

Find @mixin definitions

↓

Store mixin code

↓

Find @include statements

↓

Insert mixin code at include points

↓

Compile to CSS

↓

Browser applies CSS styles

The SCSS compiler reads the file, stores mixin code, then replaces @include lines with the mixin's CSS code before outputting CSS for the browser to render.

Render Steps - 3 Steps

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

Before

[Empty page]

→

After

[Hello]

Adding the HTML element shows the text 'Hello' with no styling.

🔧 Browser Action:Creates DOM node for div with text

Code Sample

A blue box with padding, rounded corners, and bold dark text saying 'Hello'.

SASS

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

SASS

@mixin box-style {
  padding: 1rem;
  background-color: #a0c4ff;
  border-radius: 0.5rem;
  color: #023e8a;
}

.box {
  @include box-style;
  font-weight: bold;
}

Render Quiz - 3 Questions

After step 3, what visual change do you see compared to step 2?

A The box disappears from the page.

B Only the text becomes bold with no background or padding changes.

C The box has padding, a light blue background, rounded corners, and dark blue bold text.

D The text color changes to red but no other styles.

Common Confusions - 2 Topics

Why doesn't the mixin style apply if I forget @include?

Mixins only add styles when you use @include. Without it, the mixin code is stored but not inserted, so no visual change happens.

💡 Think of mixins as reusable style recipes; you must 'call' them with @include to see the effect.

Can I use @include inside other selectors?

Yes! You can include mixins anywhere inside CSS selectors to add their styles exactly where needed.

💡 Mixins are like style blocks you can drop in multiple places for consistent design.

Property Reference

Property	Value Applied	Visual Effect	Common Use
padding	1rem	Adds space inside the box around text	Creates breathing room inside elements
background-color	#a0c4ff	Colors the box background light blue	Highlights or separates content visually
border-radius	0.5rem	Rounds the corners of the box	Softens box edges for modern look
color	#023e8a	Changes text color to dark blue	Improves text readability and style
font-weight	bold	Makes text thicker and stronger	Emphasizes important text

Concept Snapshot

Mixins store reusable CSS blocks. @include inserts mixin styles where used. Mixins help keep styles consistent. Common properties: padding, background-color, border-radius, color. Without @include, mixin styles don't appear. Use @include inside selectors to apply styles.