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.