Chained extensions in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a chained extension in Sass?

A chained extension in Sass is when one selector extends another, which itself extends a third selector, creating a chain of shared styles.

beginner

How do you write a simple extension in Sass?

Use @extend followed by the selector you want to inherit styles from, like .button { @extend .base; }.

intermediate

What happens when you chain extensions in Sass?

Sass combines all selectors in the chain so they share the same styles, reducing repeated CSS and keeping code DRY (Don't Repeat Yourself).

advanced

Can chained extensions cause unexpected CSS selectors? Why?

Yes, because Sass merges selectors from all extended classes, sometimes creating complex combined selectors that might affect styling unexpectedly.

intermediate

Why is it important to use chained extensions carefully?

Because overusing or chaining many extensions can create large, complicated CSS selectors that are hard to maintain and may slow down page rendering.

What does @extend do in Sass?

A Defines a new variable

B Imports external CSS files

C Copies styles from one selector to another

D Creates a new mixin

@extend copies styles from the specified selector to the current one, sharing CSS rules.

If .btn extends .base and .primary extends .btn, what is this called?

A Mixin inclusion

B Chained extension

C Variable inheritance

D Selector nesting

This is a chained extension because .primary extends .btn, which extends .base.

What is a risk of chaining many extensions in Sass?

A Creating very long CSS selectors

B Losing variable values

C Breaking JavaScript code

D Disabling responsive design

Chaining many extensions can create long combined selectors that are hard to read and maintain.

Which Sass feature is best for sharing styles without creating chained selectors?

A Mixins

B Variables

C Functions

D Placeholders

Mixins allow style reuse without merging selectors, avoiding chained extension complexity.

How does Sass handle selectors when using chained extensions?

A It converts selectors to IDs

B It duplicates styles for each selector

C It ignores the first selector

D It merges all selectors into combined selectors

Sass merges selectors from all extended classes to share styles efficiently.

Explain what chained extensions are in Sass and how they affect the generated CSS.

Think about how one selector extending another creates a chain.

Describe potential problems when using many chained extensions and how to avoid them.

Consider what happens to CSS selectors as chains grow longer.