Extending vs mixing comparison in SASS - When to Use Which

The Big Idea

Discover how a small Sass trick can save you hours of repetitive styling work!

The Scenario

Imagine you have many buttons on your website, each with slightly different colors but mostly the same style. You write the same style rules again and again for each button.

The Problem

Writing repeated styles manually wastes time and makes your code long and hard to update. If you want to change the common style, you must edit every button's code separately, risking mistakes and inconsistency.

The Solution

Using extending or mixins in Sass lets you share styles easily. You write common styles once and reuse them, so your code stays clean and changes apply everywhere automatically.

Before vs After

✗ Before

.btn-primary { color: white; background: blue; padding: 1rem; }
.btn-secondary { color: white; background: gray; padding: 1rem; }

✓ After

@mixin button-style { color: white; padding: 1rem; }
.btn-primary { @include button-style; background: blue; }
.btn-secondary { @include button-style; background: gray; }

What It Enables

You can build consistent, easy-to-maintain styles that save time and reduce errors across your whole website.

Real Life Example

A design system with many components sharing base styles but needing small differences uses mixins or extends to keep code DRY and updates simple.

Key Takeaways

Manual repetition wastes time and causes errors.

Extending and mixins share styles to keep code clean.

They make updates fast and consistent across many elements.

Practice

1. What is the main difference between @extend and @mixin in Sass?

easy

A. @extend shares styles by combining selectors, @mixin copies styles into selectors.

B. @extend copies styles into selectors, @mixin combines selectors.

C. @extend creates new CSS files, @mixin deletes unused styles.

D. @extend is used only for variables, @mixin is used only for functions.

Solution

1. Step 1: Understand @extend behavior

   @extend merges selectors that share the same styles, reducing CSS size by combining rules.

2. Step 2: Understand @mixin behavior

   @mixin copies the style block wherever it is included, allowing flexible reuse but increasing CSS size.

3. Final Answer:

   @extend shares styles by combining selectors, @mixin copies styles into selectors. -> Option A

4. Quick Check:

   @extend combines, @mixin copies [OK]

Hint: Remember: extend merges selectors, mixin copies styles [OK]

Common Mistakes:

• Confusing which one copies vs combines styles
• Thinking @extend creates new CSS files
• Believing @mixin deletes unused styles

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

easy

A. @extend button-style;

B. @include button-style;

C. @mixin button-style;

D. @use button-style;

Solution

1. Step 1: Recall mixin inclusion syntax

   To use a mixin, Sass requires @include mixin-name; syntax.

2. Step 2: Differentiate from other directives

   @extend is for extending selectors, @mixin defines mixins, and @use imports modules.

3. Final Answer:

   @include button-style; -> Option B

4. Quick Check:

   Use @include to add mixins [OK]

Hint: Use @include to add mixins, not @extend or @mixin [OK]

Common Mistakes:

• Using @extend instead of @include for mixins
• Confusing @mixin (definition) with @include (usage)
• Using @use for mixins instead of modules

3. Given the Sass code:

@mixin red-text { color: red; }
.button { @include red-text; }

What CSS will be generated?

medium

A. .button, .red-text { color: red; }

B. Error: mixin not extended

C. .red-text { color: red; }

D. .button { color: red; }

Solution

1. Step 1: Understand mixin inclusion

   The mixin red-text defines color: red;. Including it copies this style into .button.

2. Step 2: Check generated CSS

   The CSS will have .button { color: red; } because the mixin's styles are copied inside the selector.

3. Final Answer:

   .button { color: red; } -> Option D

4. Quick Check:

   Mixin copies styles inside selector [OK]

Hint: Mixins copy styles inside selectors, no selector merging [OK]

Common Mistakes:

• Expecting selectors to merge like @extend
• Thinking mixin creates separate class
• Assuming syntax error without @extend

4. Identify the error in this Sass code:

.alert { color: red; }
.error { @extend .alert; }
.error { background: yellow; }

medium

A. No error; code compiles and merges selectors.

B. Error: Cannot extend a class defined after the extend.

C. Error: Duplicate selector .error is not allowed.

D. Error: @extend cannot be used inside .error selector.

Solution

1. Step 1: Check @extend usage

   @extend merges selectors with the same styles. Extending .alert inside .error is valid.

2. Step 2: Confirm multiple declarations for .error

   Multiple declarations for .error are allowed and combined in CSS output.

3. Final Answer:

   No error; code compiles and merges selectors. -> Option A

4. Quick Check:

   @extend merges selectors, multiple declarations allowed [OK]

Hint: Multiple declarations allowed; @extend merges selectors [OK]

Common Mistakes:

• Thinking duplicate selectors cause errors
• Believing @extend must come before class definition
• Assuming @extend cannot be inside selector

5. You want to create a reusable button style that can be customized with different colors without duplicating CSS selectors. Which approach is best?

hard

A. Use @extend to share base button styles and override colors separately.

B. Use @extend with color parameters inside the mixin.

C. Use @mixin with a color parameter to copy styles with different colors.

D. Use plain CSS classes without Sass features for flexibility.

Solution

1. Step 1: Understand the need for customization

   Customizing colors requires flexibility to pass different values for each button.

2. Step 2: Compare @extend and @mixin for this use case

   @extend merges selectors but cannot accept parameters. @mixin can accept parameters to customize styles.

3. Step 3: Choose the best approach

   Using a @mixin with a color parameter copies styles with different colors without duplicating selectors.

4. Final Answer:

   Use @mixin with a color parameter to copy styles with different colors. -> Option C

5. Quick Check:

   Mixins with parameters allow flexible style reuse [OK]

Hint: Use mixins with parameters for customizable reusable styles [OK]

Common Mistakes:

• Trying to pass parameters to @extend (not supported)
• Using @extend which merges selectors but lacks flexibility
• Avoiding Sass features and writing repetitive CSS