Extending vs mixing comparison in SASS - Quick Revision & Key Differences

Recall & Review

beginner

What does @extend do in Sass?

@extend lets one selector inherit the styles of another selector, combining their CSS rules in the output.

beginner

How does @mixin differ from @extend in Sass?

@mixin copies a block of styles wherever it is included, while @extend merges selectors to share styles.

intermediate

What is a key advantage of using @mixin over @extend?

@mixin can accept parameters, making styles reusable with variations.

intermediate

What is a downside of using @extend in Sass?

@extend can create complex combined selectors that may increase CSS file size and affect specificity.

beginner

When should you prefer @mixin instead of @extend?

Use @mixin when you need style variations or want to avoid complex selector combinations.

What happens when you use @extend in Sass?

A It merges selectors sharing the same styles.

B It copies styles as a separate block.

C It creates a new CSS file.

D It deletes unused styles.

@extend merges selectors to share styles, avoiding duplication.

Which Sass feature allows passing parameters to customize styles?

A <code>@extend</code>

B <code>@import</code>

C <code>@function</code>

D <code>@mixin</code>

@mixin supports parameters for flexible style reuse.

Which is a potential downside of @extend?

A Creates duplicate CSS rules.

B Merges selectors causing complex CSS.

C Does not work with variables.

D Cannot accept parameters.

@extend merges selectors which can lead to complex combined selectors.

If you want to reuse styles with different colors, which should you use?

A <code>@mixin</code>

B <code>@extend</code>

C Plain CSS classes

D CSS variables only

@mixin can take parameters like colors to customize styles.

Which Sass feature helps reduce CSS file size by merging selectors?

A <code>@mixin</code>

B <code>@include</code>

C <code>@extend</code>

D <code>@function</code>

@extend merges selectors to avoid repeating styles, reducing file size.

Explain the main differences between @extend and @mixin in Sass.

Think about how styles are reused and how the final CSS looks.

Describe a situation where using @mixin is better than @extend.

Consider when you want to change colors or sizes dynamically.

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