Extending vs mixing comparison in SASS

Introduction

Extending and mixing help reuse styles in Sass so you don't repeat yourself. They make your CSS cleaner and easier to manage.

When you want to share common styles between selectors without copying code.

When you want to keep your CSS file size smaller by avoiding repeated rules.

When you want to add a group of styles to a selector quickly.

When you want to keep your styles organized and easy to update.

When you want to create reusable style blocks for buttons, cards, or other components.

Syntax

SASS

@extend .selector-to-extend;

@mixin mixin-name {
  property: value;
}

@include mixin-name;

@extend copies styles from one selector to another by merging selectors in the CSS output.

@mixin defines reusable style blocks, and @include inserts those styles where needed.

Examples

This example uses @extend to share styles from .button to .primary-button.

SASS

.button {
  background: blue;
  color: white;
}

.primary-button {
  @extend .button;
  font-weight: bold;
}

This example uses a @mixin to define styles and @include to add them to .primary-button.

SASS

@mixin button-styles {
  background: blue;
  color: white;
}

.primary-button {
  @include button-styles;
  font-weight: bold;
}

@extend merges selectors, so both .alert and .error share styles.

SASS

.alert {
  border: 1px solid red;
  padding: 1rem;
}

.error {
  @extend .alert;
  background: pink;
}

@mixin copies styles directly into .error, keeping selectors separate.

SASS

@mixin alert-styles {
  border: 1px solid red;
  padding: 1rem;
}

.error {
  @include alert-styles;
  background: pink;
}

Sample Program

This example shows two ways to reuse styles. The blue buttons share styles using @extend, so their CSS selectors are combined. The alert and error boxes show how @mixin copies styles separately, so the error box has its own background color added.

SASS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Extending vs Mixing Example</title>
  <style>
    /* Compiled CSS from Sass example */
    .button, .primary-button {
      background: blue;
      color: white;
    }
    .primary-button {
      font-weight: bold;
    }

    .alert, .error {
      border: 1px solid red;
      padding: 1rem;
    }
    .error {
      background: pink;
    }
  </style>
</head>
<body>
  <button class="button">Normal Button</button>
  <button class="primary-button">Primary Button</button>

  <div class="alert">Alert Box</div>
  <div class="error">Error Box</div>
</body>
</html>

Important Notes

@extend merges selectors in the final CSS, which can reduce file size but may cause unexpected style inheritance.

@mixin copies styles wherever included, which can increase CSS size but keeps selectors separate and predictable.

Use @extend for simple shared styles and @mixin when you need more control or parameters.

Summary

@extend shares styles by combining selectors in the CSS output.

@mixin copies style blocks into selectors where included.

Choose @extend for smaller CSS and @mixin for flexible, reusable styles.

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