Extending vs mixing comparison in SASS - Browser Rendering Compared

Render Flow - Extending vs mixing comparison

Write .button styles

→Create CSS rules for .button

↓

Use @extend in .primary

→Add .primary styles by reusing .button rules

↓

Use @mixin in .secondary

→Insert mixin styles into .secondary

↓

Compile final CSS with combined rules

The Sass compiler reads base styles, then applies @extend by merging selectors, and @mixin by copying styles into the target selector, producing final CSS.

Render Steps - 3 Steps

Code Added:.button { @include button-style; background-color: lightgray; border: none; }

Before

[No buttons styled]

[button] [button]

→

After

[button: lightgray background, padded, rounded]
[button: lightgray background, padded, rounded]

The base .button style applies padding, border-radius, and background color to all buttons with .button class.

🔧 Browser Action:Creates CSS rules for .button and applies styles to matching elements.

Code Sample

Two buttons styled: .primary reuses .button styles by extending, .secondary reuses styles by mixing in a shared style block.

SASS

<button class="button primary">Primary</button>
<button class="button secondary">Secondary</button>

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.button {
  @include button-style;
  background-color: lightgray;
  border: none;
}

.primary {
  @extend .button;
  background-color: blue;
  color: white;
}

.secondary {
  @include button-style;
  background-color: green;
  color: white;
}

Render Quiz - 3 Questions

After applying step 2, what visual difference do you see on the .primary button?

A It looks the same as the base .button with lightgray background

B It has blue background and white text with padding and rounded corners

C It has green background and white text

D It loses all padding and border-radius

Common Confusions - 2 Topics

Why does @extend combine selectors but @mixin duplicates styles?

@extend tells Sass to merge selectors so they share one CSS rule, reducing CSS size. @mixin copies styles into each selector separately, so CSS grows but allows different overrides.

💡 Use @extend to share exact styles and keep CSS small; use @mixin to reuse styles but keep selectors independent.

Can I override styles after using @extend or @mixin?

Yes. After @extend, you can add new properties to the selector that override shared styles. After @mixin, you can add or override properties normally since styles are copied.

💡 Overrides work both ways, but @extend shares base styles, so be careful with conflicting rules.

Property Reference

Feature	How It Works	CSS Output	When to Use
@extend	Merges selectors sharing styles	Combined selectors with shared rules	When you want to avoid duplicate CSS and share exact styles
@mixin	Copies styles into each selector	Separate CSS rules with repeated styles	When you want reusable style blocks with flexibility

Concept Snapshot

@extend merges selectors to share styles, reducing CSS size. @mixin copies style blocks into selectors, increasing CSS size but allowing flexibility. Use @extend for exact style sharing. Use @mixin for reusable style blocks with overrides. Overrides work after both methods. Choose based on CSS size and style needs.

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