Why extending reduces duplication in SASS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why does @extend reduce duplication in Sass?

Consider the Sass code below. What is the main reason using @extend reduces duplication in the compiled CSS?

SASS

%button-base {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.btn-primary {
  @extend %button-base;
  background-color: blue;
  color: white;
}

A Because @extend creates new CSS classes for each use, adding more code.

B Because @extend duplicates all styles into each selector, increasing file size.

C Because @extend removes all styles from the original selector, leaving it empty.

D Because @extend merges selectors sharing the same styles, so the CSS rules appear only once.

💡 Hint

Think about how CSS selectors combine when using @extend.

The @extend directive in Sass allows selectors to share styles by merging them into a single CSS rule. This means the styles are written once, and multiple selectors point to that rule, reducing duplication in the final CSS.

📝 Syntax

intermediate

What is the output CSS from this Sass using @extend?

Given the Sass code below, what is the compiled CSS output?

SASS

%alert {
  padding: 1rem;
  border: 1px solid red;
}

.error {
  @extend %alert;
  background-color: pink;
}

.warning {
  @extend %alert;
  background-color: yellow;
}

A

.error, .warning {
  padding: 1rem;
  border: 1px solid red;
}
.error {
  background-color: pink;
}
.warning {
  background-color: yellow;
}

B

.error {
  padding: 1rem;
  border: 1px solid red;
  background-color: pink;
}
.warning {
  padding: 1rem;
  border: 1px solid red;
  background-color: yellow;
}

C

%alert {
  padding: 1rem;
  border: 1px solid red;
}
.error {
  background-color: pink;
}
.warning {
  background-color: yellow;
}

D

.error, .warning {
  background-color: pink;
  padding: 1rem;
  border: 1px solid red;
}

💡 Hint

Look at how selectors combine when extending a placeholder.

The @extend directive merges selectors that share the same styles into a single CSS rule. The placeholder %alert does not appear in the output. The background colors remain separate for each class.

❓ selector

advanced

Which selector combination results from this Sass @extend?

What is the combined selector in the compiled CSS after this Sass code runs?

SASS

%card {
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  padding: 1rem;
}

.profile-card {
  @extend %card;
  border-radius: 0.5rem;
}

.product-card {
  @extend %card;
  border-radius: 1rem;
}

A .profile-card, .product-card

B %card, .profile-card, .product-card

C .profile-card.product-card

D .profile-card .product-card

💡 Hint

Think about how @extend merges selectors sharing the same styles.

The @extend directive merges selectors that use the placeholder %card into a combined selector list. The placeholder itself does not appear in the output.

❓ layout

advanced

How does @extend affect CSS file size and layout performance?

Which statement best describes the impact of using @extend on CSS file size and browser layout performance?

A @extend has no effect on CSS file size or browser performance.

B @extend reduces CSS file size by combining selectors, which can improve browser rendering speed.

C @extend increases CSS file size by duplicating styles, slowing down browser layout.

D @extend removes all styles from extended selectors, causing layout issues.

💡 Hint

Consider how fewer repeated styles affect file size and rendering.

By merging selectors with shared styles, @extend reduces the total CSS code size. Smaller CSS files load faster and browsers can render pages more efficiently.

❓ accessibility

expert

How can @extend misuse affect accessibility in CSS?

Which scenario shows how incorrect use of @extend might unintentionally harm accessibility?

A Extending color contrast styles to multiple elements, improving readability.

B Extending a button style into a link, making it keyboard accessible.

C Extending a visually hidden class into a visible element, causing it to be hidden from screen readers.

D Extending focus styles to all interactive elements, enhancing keyboard navigation.

💡 Hint

Think about how styles that hide content affect screen readers.

If you extend a class that hides content visually (like .sr-only or similar) into an element that should be visible, it can hide important content from screen readers and users, harming accessibility.