@extend directive in SASS

Introduction

The @extend directive helps you reuse styles from one CSS selector in another. It keeps your code shorter and easier to manage.

When you want multiple elements to share the same styles without repeating code.

When you have a base button style and want to create variations like primary or secondary buttons.

When you want to keep your CSS organized by grouping similar styles together.

When you want to avoid copying and pasting the same CSS rules in many places.

When you want to make future style changes easier by updating one place.

Syntax

SASS

@extend selector;

The selector is the CSS class or element whose styles you want to reuse.

You write @extend inside a CSS rule to inherit styles from another rule.

Examples

This makes .button-primary use all styles from .button plus its own background color.

SASS

.button-primary {
  @extend .button;
  background-color: blue;
}

.alert-error inherits styles from .alert and adds red text color.

SASS

.alert-error {
  @extend .alert;
  color: red;
}

The h1 element will have all styles from .title plus a bigger font size.

SASS

h1 {
  @extend .title;
  font-size: 2rem;
}

Sample Program

This example shows a base button style in .button. The .button-primary and .button-danger classes reuse the base styles using @extend and add their own colors.

In the browser, you will see three buttons with consistent padding and shape but different background colors.

SASS

@use 'sass:color';

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: #eee;
  color: #333;
  border: none;
  cursor: pointer;
}

.button-primary {
  @extend .button;
  background-color: #007bff;
  color: white;
}

.button-danger {
  @extend .button;
  background-color: #dc3545;
  color: white;
}

/* HTML example to use these classes */

/*
<button class="button">Normal</button>
<button class="button-primary">Primary</button>
<button class="button-danger">Danger</button>
*/

Important Notes

Do not overuse @extend because it can create complex CSS selectors that are hard to debug.

@extend works best with classes, not with IDs or element selectors.

Use @extend to keep your styles DRY (Don't Repeat Yourself) and easier to maintain.

Summary

@extend lets one CSS rule reuse styles from another.

It helps keep your CSS code shorter and organized.

Use it to share common styles like buttons or alerts across different classes.

Practice

1. What does the @extend directive do in Sass?

easy

A. It defines a variable.

B. It creates a new CSS property.

C. It imports external CSS files.

D. It allows one selector to reuse styles from another selector.

Solution

1. Step 1: Understand the purpose of @extend

   The @extend directive is used to share styles between selectors in Sass.

2. Step 2: Identify what @extend does

   It copies the styles of one selector into another, reducing repetition.

3. Final Answer:

   It allows one selector to reuse styles from another selector. -> Option D

4. Quick Check:

   @extend = reuse styles [OK]

Hint: Remember: @extend shares styles between selectors [OK]

Common Mistakes:

• Thinking @extend creates new properties
• Confusing @extend with imports
• Using @extend to define variables

2. Which of the following is the correct syntax to extend styles from .button to .submit in Sass?

easy

A. .submit { @extend .button; }

B. .submit { extend(@button); }

C. .submit { @extend .button(); }

D. .submit { @extend '#button'; }

Solution

1. Step 1: Recall correct @extend syntax

   The correct syntax is @extend followed by the selector name without quotes or parentheses.

2. Step 2: Check each option

   .submit { @extend .button; } uses @extend .button; which is correct. Others use wrong syntax like parentheses or quotes.

3. Final Answer:

   .submit { @extend .button; } -> Option A

4. Quick Check:

   Correct syntax = @extend .selector; [OK]

Hint: Use @extend followed by selector without quotes or parentheses [OK]

Common Mistakes:

• Adding parentheses after selector
• Using quotes around selector
• Using wrong function-like syntax

3. Given this Sass code:

.alert { color: red; font-weight: bold; }
.error { @extend .alert; }

What CSS will be generated?

medium

A. .alert { color: red; font-weight: bold; } .error { color: red; font-weight: bold; }

B. .alert, .error { color: red; font-weight: bold; }

C. .error { color: red; font-weight: bold; }

D. .alert { color: red; } .error { font-weight: bold; }

Solution

1. Step 1: Understand @extend output

   @extend merges selectors so they share the same style block.

2. Step 2: Apply to given code

   Both .alert and .error share the same styles in one combined selector.

3. Final Answer:

   .alert, .error { color: red; font-weight: bold; } -> Option B

4. Quick Check:

   Selectors combined with @extend [OK]

Hint: Remember: @extend combines selectors sharing styles [OK]

Common Mistakes:

• Expecting duplicated style blocks
• Thinking styles copy separately
• Splitting properties between selectors

4. What is wrong with this Sass code?

.card { border: 1px solid black; }
.panel { @extend card; }

medium

A. Missing dot before card in @extend selector.

B. Cannot use @extend inside .panel.

C. Border property is invalid.

D. No styles defined in .panel.

Solution

1. Step 1: Check @extend selector syntax

   The selector to extend must include the dot for class selectors.

2. Step 2: Identify error in code

   @extend card; misses the dot, should be @extend .card;.

3. Final Answer:

   Missing dot before card in @extend selector. -> Option A

4. Quick Check:

   Class selectors need dot in @extend [OK]

Hint: Always include dot for class names in @extend [OK]

Common Mistakes:

• Omitting dot before class name
• Thinking @extend can't be used inside rules
• Confusing property errors with selector errors

5. You want to create a .warning style that shares all styles from .alert but also adds background-color: yellow;. Which Sass code correctly does this?

hard

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

B. .warning { background-color: yellow; @extend .alert(); }

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

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

Solution

1. Step 1: Understand @extend usage with additional styles

   You can use @extend inside a selector and add other properties after it.

2. Step 2: Check each option

   .warning { @extend .alert; background-color: yellow; } correctly uses @extend .alert; then adds background-color in the same block. Others have syntax errors: parentheses after selector, missing dot before alert, or missing semicolon.

3. Final Answer:

   .warning { @extend .alert; background-color: yellow; } -> Option C

4. Quick Check:

   @extend plus extra styles in same block [OK]

Hint: Put @extend first, then add extra styles in same block [OK]

Common Mistakes:

• Adding parentheses after selector
• Omitting dot before class name in @extend
• Missing semicolon after @extend