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.

Practice

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

easy

A. It reduces repeated CSS by sharing styles between selectors.

B. It adds new colors to your stylesheet automatically.

C. It compiles Sass into JavaScript code.

D. It creates animations without keyframes.

Solution

1. Step 1: Understand the purpose of @extend

   @extend allows one selector to inherit styles from another, avoiding repetition.

2. Step 2: Identify the benefit

   This sharing reduces duplicated CSS rules, making code cleaner and smaller.

3. Final Answer:

   It reduces repeated CSS by sharing styles between selectors. -> Option A

4. Quick Check:

   Extending reduces duplication = B [OK]

Hint: Remember: @extend shares styles to avoid repeats [OK]

Common Mistakes:

• Thinking @extend adds new styles instead of sharing
• Confusing @extend with mixins
• Believing @extend compiles to JavaScript

2. Which of the following is the correct syntax to extend a placeholder selector %button-base in Sass?

easy

A. .btn {@extends %button-base;}

B. .btn {@extend %button-base;}

C. .btn {extend %button-base;}

D. .btn {use %button-base;}

Solution

1. Step 1: Recall correct @extend syntax

   The correct keyword is @extend with an '@' symbol and a semicolon inside the block.

2. Step 2: Match syntax with options

   .btn {@extend %button-base;} uses @extend %button-base; correctly inside the selector block.

3. Final Answer:

   .btn {@extend %button-base;} -> Option B

4. Quick Check:

   Correct @extend syntax = C [OK]

Hint: Look for '@extend' with '@' and semicolon inside braces [OK]

Common Mistakes:

• Missing '@' symbol before extend
• Using 'extends' instead of 'extend'
• Omitting semicolon after extend statement

3. Given the Sass code:

%base { color: blue; font-weight: bold; }
.title {@extend %base; font-size: 2rem;}
.subtitle {@extend %base; font-size: 1.5rem;}

What CSS will be generated?

medium

A. .title, .subtitle { color: blue; font-weight: bold; } .title { font-size: 2rem; } .subtitle { font-size: 1.5rem; }

B. .title { color: blue; font-weight: bold; font-size: 2rem; } .subtitle { color: blue; font-weight: bold; font-size: 1.5rem; }

C. %base { color: blue; font-weight: bold; } .title { font-size: 2rem; } .subtitle { font-size: 1.5rem; }

D. .title { font-size: 2rem; } .subtitle { font-size: 1.5rem; }

Solution

1. Step 1: Understand @extend behavior

   Extending a placeholder merges selectors sharing the same styles into one CSS rule.

2. Step 2: Analyze generated CSS

   Both .title and .subtitle share color: blue and font-weight: bold in a combined selector. Their font sizes remain separate.

3. Final Answer:

   .title, .subtitle { color: blue; font-weight: bold; } .title { font-size: 2rem; } .subtitle { font-size: 1.5rem; } -> Option A

4. Quick Check:

   Shared styles combined, unique styles separate = A [OK]

Hint: Shared styles combine selectors; unique styles stay separate [OK]

Common Mistakes:

• Expecting duplicated shared styles for each selector
• Thinking placeholder selectors appear in CSS
• Confusing @extend with mixins copying styles

4. Identify the error in this Sass code:

%card { padding: 1rem; border: 1px solid #ccc; }
.panel { @extend card; background: white; }

medium

A. Padding value must be in pixels, not rem.

B. Cannot extend placeholder selectors.

C. Background property is invalid inside .panel.

D. Missing '%' before 'card' in the extend statement.

Solution

1. Step 1: Check @extend syntax

   The placeholder selector %card must be referenced with the '%' in the extend statement.

2. Step 2: Identify the error

   The code uses @extend card; missing the '%', causing a syntax error.

3. Final Answer:

   Missing '%' before 'card' in the extend statement. -> Option D

4. Quick Check:

   Extend placeholder needs '%' = D [OK]

Hint: Always include '%' when extending placeholders [OK]

Common Mistakes:

• Forgetting '%' in extend target
• Thinking placeholders can't be extended
• Misunderstanding property units

5. You have multiple button styles sharing common properties. How does using @extend with a placeholder selector help maintain your Sass code better compared to copying styles into each button class?

hard

A. It automatically generates JavaScript to handle button clicks.

B. It duplicates all styles for each button, increasing CSS size but improving clarity.

C. It creates one combined CSS rule for shared styles, reducing file size and easing updates.

D. It prevents any styles from being applied until manually enabled.

Solution

1. Step 1: Understand style duplication problem

   Copying shared styles into each button class repeats code, making updates tedious and CSS larger.

2. Step 2: Explain @extend advantage

   Using @extend with a placeholder merges shared styles into one CSS rule, reducing duplication and file size.

3. Step 3: Benefits for maintenance

   Updating shared styles in one place updates all buttons, making code easier to maintain.

4. Final Answer:

   It creates one combined CSS rule for shared styles, reducing file size and easing updates. -> Option C

5. Quick Check:

   Extending merges shared styles = A [OK]

Hint: Extend placeholders to combine shared styles and simplify updates [OK]

Common Mistakes:

• Thinking extend duplicates styles instead of merging
• Confusing extend with JavaScript generation
• Believing styles are disabled until enabled