Including mixins with @include in SASS - Deep Dive

Overview - Including mixins with @include

What is it?

Including mixins with @include in Sass means reusing a set of CSS styles by calling a named block of code called a mixin. Mixins let you write styles once and use them many times, helping keep your CSS clean and organized. When you use @include, Sass inserts the styles from the mixin right where you call it. This saves time and avoids repeating the same CSS rules everywhere.

Why it matters

Without mixins and @include, you would have to write the same CSS styles over and over, making your code long, hard to maintain, and prone to mistakes. Mixins solve this by letting you write reusable style blocks, so changes happen in one place and update everywhere. This makes your website easier to update and faster to build, especially when styles repeat across many elements.

Where it fits

Before learning @include, you should understand basic CSS and how Sass variables work. After mastering @include, you can learn about advanced Sass features like mixin arguments, control directives, and functions to create even more flexible styles.

Mental Model

Core Idea

Using @include is like copying a recipe from a cookbook into your kitchen exactly where you need it, so you don’t have to write the recipe again.

Think of it like...

Imagine you have a favorite sandwich recipe written on a card. Instead of rewriting the recipe every time you want a sandwich, you just grab the card and follow it. @include works the same way by grabbing a style recipe (mixin) and putting it where you want in your CSS.

Mixin (Recipe) ──> @include (Copy Recipe Here)

┌─────────────┐      ┌───────────────┐
│  Mixin Box  │─────▶│  Include Point│
│ (styles)   │      │ (styles copied)│
└─────────────┘      └───────────────┘

Build-Up - 7 Steps

1

Foundation

What is a Mixin in Sass

Concept: Introduces the idea of a mixin as a reusable block of styles.

A mixin is a named group of CSS rules you write once and reuse. You create it with @mixin followed by a name and curly braces containing styles. For example: @mixin rounded { border-radius: 10px; background-color: lightblue; } This mixin holds styles for rounded corners and a background color.

Result

You have a reusable style block named 'rounded' that you can use anywhere in your Sass code.

Understanding mixins as reusable style blocks helps you avoid repeating CSS and keeps your code DRY (Don't Repeat Yourself).

2

Foundation

Using @include to Insert Mixins

Concept: Shows how to use @include to add mixin styles into selectors.

To use a mixin, write @include followed by the mixin name inside a CSS selector. For example: .button { @include rounded; padding: 10px 20px; } This copies the 'rounded' styles into the .button class.

Result

The .button class will have border-radius: 10px and background-color: lightblue, plus padding.

Knowing that @include copies mixin styles exactly where you place it helps you control style reuse precisely.

3

Intermediate

Mixins with Arguments for Flexibility

🤔Before reading on: do you think mixins can accept values to customize styles? Commit to yes or no.

Concept: Introduces passing values to mixins to change their styles dynamically.

Mixins can take arguments (parameters) to make them flexible. For example: @mixin rounded($radius) { border-radius: $radius; } Then use it with a value: .box { @include rounded(15px); } This sets border-radius to 15px for .box.

Result

The .box class has border-radius: 15px, showing how mixins can adapt styles based on input.

Understanding arguments in mixins lets you create one mixin that works for many style variations, reducing code duplication further.

4

Intermediate

Combining Multiple Mixins with @include

🤔Before reading on: can you include more than one mixin inside a selector? Commit to yes or no.

Concept: Shows that you can add several mixins to a single selector to combine styles.

You can use multiple @include statements inside one CSS rule. For example: @mixin shadow { box-shadow: 2px 2px 5px gray; } .card { @include rounded(8px); @include shadow; padding: 20px; } This adds both rounded corners and shadow to .card.

Result

The .card class has border-radius: 8px, box-shadow, and padding styles combined.

Knowing you can stack mixins helps you build complex styles from simple reusable parts.

5

Intermediate

Default Values in Mixin Arguments

🤔Before reading on: do you think mixin arguments can have default values? Commit to yes or no.

Concept: Explains how to set default values for mixin parameters to make arguments optional.

You can give mixin arguments default values like this: @mixin rounded($radius: 5px) { border-radius: $radius; } If you use @include rounded; without a value, it uses 5px automatically. Example: .box { @include rounded; } This sets border-radius to 5px.

Result

The .box class has border-radius: 5px without passing any argument.

Default values make mixins easier to use by providing sensible fallbacks, reducing the need to always specify arguments.

6

Advanced

How @include Expands in Compiled CSS

🤔Before reading on: does @include create a CSS selector or copy styles inside existing selectors? Commit to your answer.

Concept: Shows that @include copies mixin styles inside the selector where it is used, not creating new selectors.

When Sass compiles, @include inserts the mixin's CSS rules directly inside the selector that called it. For example: @mixin rounded { border-radius: 10px; } .button { @include rounded; color: white; } Compiles to: .button { border-radius: 10px; color: white; } No extra selectors are created.

Result

The compiled CSS has the combined styles inside the original selector, keeping CSS clean and efficient.

Knowing that @include copies styles inline helps you predict the final CSS structure and avoid unexpected selectors.

7

Expert

Performance and Code Size Considerations with @include

🤔Before reading on: does using many @include calls always reduce CSS file size? Commit to yes or no.

Concept: Explains that while mixins help reuse code, overusing @include can increase CSS size because styles are copied each time.

Each @include copies the mixin's styles into the CSS. If you include the same mixin many times, the CSS grows larger. For example, including a large mixin in 10 places duplicates its styles 10 times. To avoid this, use placeholder selectors (%placeholders) with @extend for shared styles or limit mixin size. Example: // Large mixin @mixin big-style { font-size: 16px; color: black; padding: 10px; border: 1px solid gray; } // Included in many selectors .box { @include big-style; } .card { @include big-style; } This duplicates styles in CSS.

Result

The CSS file size can grow significantly if mixins are included repeatedly without care.

Understanding the tradeoff between code reuse and CSS size helps you write efficient Sass and avoid bloated stylesheets.

Under the Hood

When Sass processes your code, it finds each @include statement and replaces it by copying the exact CSS rules from the named mixin into the place where @include appears. This happens before the final CSS is generated. Mixins can accept arguments, which Sass substitutes into the copied styles. This copying is a text expansion step, not a reference or link, so each @include creates its own copy of the styles.

Why designed this way?

Sass was designed to keep CSS simple and compatible with browsers by generating plain CSS. Copying mixin styles inline ensures the output CSS works everywhere without special runtime support. This design trades off some CSS size for maximum compatibility and simplicity. Alternatives like CSS custom properties or @extend exist but have different tradeoffs.

Sass Source Code
┌─────────────────────────────┐
│ @mixin rounded($r) {        │
│   border-radius: $r;        │
│ }                           │
│                             │
│ .button {                   │
│   @include rounded(10px);   │
│ }                           │
└─────────────┬───────────────┘
              │
              ▼
Compiled CSS
┌─────────────────────────────┐
│ .button {                   │
│   border-radius: 10px;      │
│ }                           │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does @include create a new CSS selector by itself? Commit to yes or no.

Common Belief: Many think @include creates a new CSS selector in the output.

Reality: @include copies the mixin's styles inside the existing selector where it is used; it does not create new selectors.

Why it matters: Believing this causes confusion about CSS output structure and can lead to unexpected styling bugs.

Quick: Can you pass any number of arguments to a mixin without defining them? Commit to yes or no.

Common Belief: Some believe mixins accept unlimited arguments without declaration.

Reality: Mixins only accept the arguments defined in their declaration; extra arguments cause errors.

Why it matters: Misunderstanding this leads to errors and frustration when mixins don't work as expected.

Quick: Does using many @include calls always reduce the final CSS file size? Commit to yes or no.

Common Belief: People often think @include always makes CSS smaller by reusing code.

Reality: @include copies styles each time, so many calls can increase CSS size significantly.

Why it matters: Ignoring this can cause bloated CSS files, slowing page load and hurting performance.

Quick: Is @include the only way to reuse styles in Sass? Commit to yes or no.

Common Belief: Many think @include is the only method for style reuse in Sass.

Reality: Sass also offers @extend and placeholder selectors for reuse, each with different tradeoffs.

Why it matters: Not knowing alternatives limits your ability to write efficient and maintainable styles.

Expert Zone

1

Mixins with complex logic (like loops or conditionals) can generate large CSS if included many times, so use them carefully.

2

Using @include with default argument values allows flexible yet concise style reuse, but overriding defaults inconsistently can cause maintenance headaches.

3

Combining @include with media queries inside mixins can centralize responsive styles but may complicate debugging compiled CSS.

When NOT to use

Avoid using @include for very large style blocks repeated many times; instead, use @extend with placeholders to share selectors and reduce CSS size. Also, for simple style reuse without parameters, CSS custom properties or utility classes might be better.

Production Patterns

In real projects, developers use @include for small reusable style snippets like buttons or shadows, often with arguments for customization. They combine mixins with variables and control directives to build scalable, maintainable style systems. Large shared styles use @extend or utility-first CSS frameworks to optimize output size.

Connections

Functions in Programming

Both mixins and functions encapsulate reusable code blocks that can accept inputs and produce outputs.

Understanding mixins as style functions helps grasp how parameters customize behavior, similar to how functions work in programming languages.

Templates in Document Editing

Mixins act like templates that you fill in and reuse to avoid rewriting content.

Knowing how templates save time in writing documents clarifies why mixins save time in writing CSS.

Manufacturing Assembly Lines

Mixins are like standardized parts assembled repeatedly in different products.

Seeing mixins as reusable parts helps understand how they speed up production and maintain consistency.

Common Pitfalls

#1 Including a mixin without parentheses when it requires arguments.

Wrong approach:

.box {
@include rounded;
}

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

Correct approach:

.box {
@include rounded(10px);
}

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

Root cause:

Not realizing that mixins with parameters must be called with parentheses and arguments.

#2 Overusing large mixins in many selectors causing bloated CSS.

Wrong approach:

.btn1 { @include big-style; }
.btn2 { @include big-style; }
.btn3 { @include big-style; }

Correct approach:

%big-style {
font-size: 16px;
color: black;
padding: 10px;
border: 1px solid gray;
}

.btn1 { @extend %big-style; }
.btn2 { @extend %big-style; }
.btn3 { @extend %big-style; }

Root cause:

Not understanding that @include copies styles each time, while @extend shares selectors to reduce CSS size.

#3 Trying to use @include outside of a CSS selector block.

Wrong approach:

@include rounded(10px);

Correct approach:

.box {
@include rounded(10px);
}

Root cause:

Misunderstanding that @include must be inside a selector to insert styles properly.

Key Takeaways

Mixins are reusable style blocks in Sass that help avoid repeating CSS code.

@include copies the mixin's styles exactly where you call it inside a selector.

Mixins can accept arguments with default values to customize styles flexibly.

Overusing @include with large mixins can increase CSS file size; use @extend or placeholders when appropriate.

Understanding how @include works helps write clean, maintainable, and efficient CSS with Sass.