Why extending reduces duplication in SASS - Quick Recap

Recall & Review

beginner

What does the @extend directive do in Sass?

The @extend directive lets one CSS selector inherit the styles of another. This means you write styles once and reuse them, avoiding repetition.

intermediate

How does @extend help reduce CSS file size?

By sharing styles between selectors, @extend combines selectors in the output CSS. This reduces repeated style blocks, making the file smaller and cleaner.

beginner

Why is reducing duplication important in CSS?

Less duplication means easier maintenance, faster loading times, and fewer mistakes. When styles are written once and reused, updates are simpler and consistent.

beginner

What is a real-life example of using @extend?

Imagine you have a button style. Instead of rewriting the same styles for a special button, you @extend the base button style and add only the differences.

advanced

Can @extend cause any issues if used carelessly?

Yes. Extending too many selectors or extending complex selectors can create large combined selectors, which might be hard to debug or cause unexpected style clashes.

What is the main benefit of using @extend in Sass?

A It converts Sass to JavaScript

B It creates new CSS properties

C It deletes unused CSS selectors

D It reuses styles to reduce duplication

@extend helps reuse existing styles by sharing them between selectors, reducing duplication.

How does @extend affect the generated CSS selectors?

A It merges selectors that share styles

B It duplicates selectors with same styles

C It removes all selectors except one

D It changes selectors to IDs

@extend merges selectors that share styles to avoid repeating style blocks.

Which of these is a risk of overusing @extend?

A Creating very long combined selectors

B Increasing CSS file size

C Breaking JavaScript code

D Disabling browser caching

Overusing @extend can create long combined selectors that are hard to read and debug.

Why is reducing duplication in CSS helpful?

A Increases the number of CSS files

B Makes CSS harder to read

C Makes styles easier to maintain and faster to load

D Prevents using variables

Less duplication means simpler maintenance and better performance.

Which Sass feature is best for sharing styles without copying code?

A @import

B @extend

C @function

D @mixin

@extend shares styles by extending selectors, avoiding code copying.

Explain in your own words how @extend helps reduce duplication in Sass.

Think about writing styles once and using them many times.

Describe a simple example where using @extend is better than copying styles.

Imagine you have a normal button and a special button with mostly same styles.