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.

Practice

1. What does the @include directive do in Sass?

easy

A. It inserts the styles defined in a mixin into the current selector.

B. It defines a new mixin with reusable styles.

C. It imports another Sass file into the current file.

D. It creates a variable to store a color or value.

Solution

1. Step 1: Understand the role of @include

   The @include directive is used to add the styles from a mixin into a selector.

2. Step 2: Differentiate from other Sass features

   Defining mixins uses @mixin, importing files uses @import, and variables use $ syntax.

3. Final Answer:

   It inserts the styles defined in a mixin into the current selector. -> Option A

4. Quick Check:

   @include adds mixin styles [OK]

Hint: Remember: @include adds mixin styles inside selectors [OK]

Common Mistakes:

• Confusing @include with @mixin which defines mixins
• Thinking @include imports files
• Mixing up variables with mixins

2. Which of the following is the correct syntax to include a mixin named button-style in Sass?

easy

A. @include button-style();

B. @mixin button-style();

C. @include button-style;

D. @use button-style();

Solution

1. Step 1: Recall the syntax for including mixins

   The correct syntax to include a mixin is @include mixin-name(); with parentheses even if no arguments are passed.

2. Step 2: Eliminate incorrect options

   @mixin defines a mixin, not includes it. @use is for modules. Omitting parentheses is invalid syntax.

3. Final Answer:

   @include button-style(); -> Option A

4. Quick Check:

   Include mixin with @include name() [OK]

Hint: Use @include mixinName() with parentheses [OK]

Common Mistakes:

• Forgetting parentheses after mixin name
• Using @mixin instead of @include to call mixin
• Confusing @use with @include

3. Given the Sass code:

@mixin border-radius($radius) {
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
  background: blue;
}

What CSS will this produce?

medium

A. .box { border-radius: 10; background: blue; }

B. .box { border-radius: $radius; background: blue; }

C. .box { border-radius: 10px; background: blue; }

D. .box { background: blue; }

Solution

1. Step 1: Understand mixin with argument

   The mixin border-radius takes a parameter $radius and sets border-radius to that value.

2. Step 2: Apply mixin with 10px argument

   Including @include border-radius(10px); replaces $radius with 10px in the output CSS.

3. Final Answer:

   .box { border-radius: 10px; background: blue; } -> Option C

4. Quick Check:

   Mixin argument replaces variable in output [OK]

Hint: Mixin arguments replace variables inside mixin [OK]

Common Mistakes:

• Leaving variable name $radius in output CSS
• Omitting units like px in argument
• Ignoring mixin styles in output

4. Identify the error in this Sass code:

@mixin text-style {
  font-size: 1.2rem;
  color: black;
}

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

medium

A. Cannot use @include inside a selector.

B. Mixin should be defined with parentheses even if no arguments.

C. Mixin name should start with $ sign.

D. Missing parentheses after mixin name in @include.

Solution

1. Step 1: Check @include syntax

   When including a mixin, parentheses are required even if no arguments are passed.

2. Step 2: Verify other parts

   Mixin definition without parentheses is allowed if no arguments. Mixin names do not start with $. @include is valid inside selectors.

3. Final Answer:

   Missing parentheses after mixin name in @include. -> Option D

4. Quick Check:

   @include needs parentheses even if empty [OK]

Hint: Always add () after mixin name in @include [OK]

Common Mistakes:

• Omitting parentheses in @include
• Thinking mixin names start with $
• Believing @include can't be inside selectors

5. You want to create a reusable mixin card that sets a white background, shadow, and border radius. You also want to customize the border radius when including it. Which Sass code correctly defines and uses this mixin?

hard

A. @mixin card {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card(1rem);
}

B. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card(1rem);
}

C. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 1rem;
}

.container {
@include card;
}

D. @mixin card($radius) {
background: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: $radius;
}

.container {
@include card;
}

Solution

1. Step 1: Define mixin with parameter for border radius

   The mixin card must accept $radius to customize border radius.

2. Step 2: Include mixin with argument

   When including, pass the desired radius value like @include card(1rem);.

3. Step 3: Check other options for errors

   @mixin card { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card(1rem); } uses $radius without parameter, causing error. @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 1rem; } .container { @include card; } hardcodes radius and omits parentheses in include. @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card; } omits argument when including.

4. Final Answer:

   @mixin card($radius) { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: $radius; } .container { @include card(1rem); } -> Option B

5. Quick Check:

   Define mixin with param, include with argument [OK]

Hint: Define mixin params and pass args in @include [OK]

Common Mistakes:

• Using variables inside mixin without parameters
• Forgetting parentheses in @include
• Not passing required arguments when including