Why extending reduces duplication in SASS

Introduction

Extending in Sass helps you reuse styles without rewriting them. It keeps your code shorter and easier to manage.

When multiple elements share the same styles and you want to avoid repeating those styles.

When you want to keep your CSS clean and avoid copying and pasting code.

When you want to update a style in one place and have it apply everywhere.

When you want to organize your styles better by grouping common rules.

When you want to reduce the size of your final CSS file by avoiding duplicate code.

Syntax

SASS

%placeholder { property: value; }
.selector { @extend %placeholder; }

Use %placeholder selectors to define reusable styles that don't output CSS on their own.

The @extend directive copies styles from the placeholder into the selector.

Examples

This example creates a base button style and extends it in a primary button.

SASS

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

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

Both .title and .subtitle share the same text style but have different weights and colors.

SASS

%text-style {
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
}

.title {
  @extend %text-style;
  font-weight: 700;
}

.subtitle {
  @extend %text-style;
  font-weight: 400;
  color: gray;
}

Sample Program

This Sass code defines a base card style and extends it for primary and secondary cards. Both cards share padding, border-radius, and shadow, but have different borders and background colors.

SASS

@use 'sass:color';

%card-base {
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  background-color: white;
}

.card-primary {
  @extend %card-base;
  border: 2px solid blue;
}

.card-secondary {
  @extend %card-base;
  border: 2px solid gray;
  background-color: color.scale(white, $lightness: -10%);
}

/* HTML example:
<div class="card-primary">Primary Card</div>
<div class="card-secondary">Secondary Card</div>
*/

Important Notes

Extending copies styles without repeating code, making maintenance easier.

Use placeholders (%) to avoid generating extra CSS selectors.

Be careful: extending too many selectors can create complex CSS output.

Summary

Extending helps reuse styles and reduces repeated code.

Use @extend with placeholders (%) for clean, maintainable Sass.

It keeps your CSS smaller and easier to update.

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