Extending vs mixing comparison in SASS - Performance Comparison

Performance: Extending vs mixing comparison

MEDIUM IMPACT

This affects CSS file size and browser rendering speed by changing how styles are reused and combined.

Reusing button styles across multiple classes

SASS

%button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}

.primary-button {
  @extend %button-style;
}
.secondary-button {
  @extend %button-style;
  background-color: gray;
}

Using @extend shares the same CSS rules for both classes, reducing CSS size and improving load speed.

📈 Performance GainSingle CSS rule reused, reducing file size and improving LCP.

Reusing button styles across multiple classes

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}

.primary-button {
  @include button-style;
}
.secondary-button {
  @include button-style;
  background-color: gray;
}

Using @mixin duplicates the button styles in the CSS for each class, increasing file size and CSS parsing time.

📉 Performance CostAdds duplicated CSS rules, increasing CSS file size and blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@mixin reuse	No change	No change	Higher due to larger CSS	[!] OK
@extend reuse	No change	No change	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

Sass @extend merges selectors into one CSS rule, reducing CSS size and style recalculations. @mixin duplicates styles, increasing CSS size and parsing time.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to larger CSS from duplicated mixins

Core Web Vital Affected

LCP

This affects CSS file size and browser rendering speed by changing how styles are reused and combined.

Optimization Tips

1Use @extend to share styles and reduce CSS size when selectors are simple.

2Avoid @extend with complex selectors to prevent slow style calculations.

3Use @mixin for isolated reusable styles even if it increases CSS size slightly.

Performance Quiz - 3 Questions

Which Sass feature generally produces smaller CSS files when reusing styles?

A Both produce the same size

B @mixin

C @extend

D Neither affects CSS size

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, and compare CSS file sizes.

What to look for: Smaller CSS file size indicates better performance with @extend; larger size indicates duplicated styles from @mixin.

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