Extend limitations and gotchas in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a key limitation of the @extend directive in Sass?

It can only extend selectors that appear earlier in the stylesheet or in imported files. Extending selectors defined later will not work.

intermediate

Why can @extend cause unexpected CSS output?

Because it merges selectors, it can create very long, complex selectors that affect more elements than intended, leading to styling bugs.

intermediate

Can @extend be used inside media queries?

Yes, but the extended selectors must also be inside the same media query. Otherwise, the styles won’t be applied as expected.

beginner

What happens if you try to @extend a placeholder selector that does not exist?

Sass will throw an error because it cannot find the selector to extend.

beginner

How does @extend differ from mixins in Sass?

@extend merges selectors to share styles, while mixins copy properties into the selector. Mixins do not create combined selectors.

What does @extend do in Sass?

A Imports external stylesheets

B Copies properties into a selector

C Merges selectors to share styles

D Defines variables

@extend merges selectors so they share the same CSS rules.

Which of these is a limitation of @extend?

A It can extend selectors defined later in the file

B It can create very long combined selectors

C It copies properties instead of merging selectors

D It works only with variables

@extend can create long combined selectors that may cause unexpected styling.

What happens if you @extend a selector inside a media query but the original selector is outside?

A Styles are ignored

B Styles apply normally

C Sass throws an error

D Styles are duplicated

The extended selector must be inside the same media query to work properly.

If you try to @extend a non-existent placeholder selector, what happens?

A Sass throws an error

B It creates an empty selector

C Sass ignores it

D It creates a warning but compiles

Sass throws an error because it cannot find the selector to extend.

Which is true about @extend compared to mixins?

A Both merge selectors

B <code>@extend</code> copies properties, mixins merge selectors

C Both copy properties

D <code>@extend</code> merges selectors, mixins copy properties

@extend merges selectors; mixins copy properties into selectors.

Explain the main limitations and common gotchas when using @extend in Sass.

Think about order, selector merging, media queries, and errors.

Compare @extend and mixins in Sass and describe when you might choose one over the other.

Focus on how styles are shared or copied.