Extend limitations and gotchas in SASS - Mini Project: Build & Apply

Understanding Sass @extend Limitations and Gotchas

📖 Scenario: You are working on a website's styles using Sass. You want to reuse styles efficiently but need to understand how @extend works and its limitations to avoid unexpected results.

🎯 Goal: Build a small Sass stylesheet that demonstrates how @extend works, shows its limitations, and how to avoid common gotchas.

📋 What You'll Learn

Create base styles for buttons

Use @extend to reuse button styles

Add a configuration variable to control a style condition

Show how extending multiple selectors can cause unexpected CSS output

Add a final style to fix or clarify the extension behavior

💡 Why This Matters

🌍 Real World

In real projects, reusing styles saves time and keeps CSS consistent. Understanding @extend helps avoid messy CSS and unexpected selector combinations.

💼 Career

Front-end developers often use Sass for styling. Knowing @extend limitations helps write clean, maintainable stylesheets and debug CSS issues.

1

Create base button styles

Create a Sass class called .button with these styles: padding: 1rem 2rem;, border-radius: 0.5rem;, and background-color: blue;.

SASS

# Create a .button class with padding, border-radius, and background-color

// Your code here

Hint

Use .button { ... } and add the styles inside the curly braces.

2

Add a config variable for button color

Create a Sass variable called $primary-color and set it to blue. Then update the background-color in .button to use $primary-color.

SASS

$primary-color: blue;

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: $primary-color;
  // Your code here
}

Hint

Define $primary-color before using it in .button.

3

Use @extend and show multiple selector extension

Create a class .primary-button that uses @extend .button. Then create a class .alert with color: red;. Finally, create a class .alert-button that extends both .button and .alert using two @extend statements.

SASS

$primary-color: blue;

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: $primary-color;
}

// Your code here

Hint

Use @extend inside the classes to reuse styles.

4

Add a final style to clarify extension behavior

Add a style for .alert-button that sets font-weight: bold; to show how you can add extra styles after extending multiple selectors.

SASS

$primary-color: blue;

.button {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: $primary-color;
}

.primary-button {
  @extend .button;
}

.alert {
  color: red;
}

.alert-button {
  @extend .button;
  @extend .alert;
  // Your code here
}

Hint

You can add normal styles after using @extend to customize the class.

Practice

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

easy

A. It merges selectors which can cause unexpected CSS output

B. It duplicates all styles instead of reusing them

C. It only works with ID selectors

D. It cannot be used inside nested rules

Solution

1. Step 1: Understand what @extend does

   @extend reuses styles by merging selectors in the final CSS output.

2. Step 2: Identify the limitation

   Merging selectors can cause unexpected combined selectors, leading to unwanted CSS rules.

3. Final Answer:

   It merges selectors which can cause unexpected CSS output -> Option A

4. Quick Check:

   @extend merges selectors = A [OK]

Hint: Remember: @extend merges selectors, not duplicates styles [OK]

Common Mistakes:

• Thinking @extend duplicates styles
• Believing @extend only works with IDs
• Assuming @extend cannot be nested

2. Which of the following is the correct syntax to extend a placeholder selector %button-base inside a class .primary-button?

easy

A. .primary-button { @extend button-base; }

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

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

D. .primary-button { @extend #button-base; }

Solution

1. Step 1: Recall placeholder selector syntax

   Placeholder selectors start with % and must be referenced exactly with @extend %name.

2. Step 2: Check each option

   Only .primary-button { @extend %button-base; } uses @extend %button-base correctly.

3. Final Answer:

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

4. Quick Check:

   Use @extend %placeholder syntax = C [OK]

Hint: Always prefix placeholder selectors with % when extending [OK]

Common Mistakes:

• Omitting the % in the extend statement
• Using wrong keywords like 'extend' without @
• Confusing ID (#) with placeholder (%) selectors

3. Given the Sass code:

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

What will be the compiled CSS output?

medium

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

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

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

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

Solution

1. Step 1: Understand @extend merges selectors

   The .error selector extends .alert, so both selectors share the color: red; style.

2. Step 2: Check the output structure

   The merged selector .alert, .error has color: red;, and .error has its own font-weight: bold;.

3. Final Answer:

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

4. Quick Check:

   Selectors merged, styles combined = D [OK]

Hint: Extended selectors share styles in a combined selector list [OK]

Common Mistakes:

• Expecting duplicated styles instead of merged selectors
• Thinking extended styles appear only inside the extending selector
• Ignoring that @extend merges selectors

4. Consider this Sass code:

.btn { color: blue; }
.special-btn { @extend .btn; background: yellow; }
.btn-primary { @extend .btn; }

Why might the compiled CSS include unexpected selectors combined with .btn-primary?

medium

A. Because @extend duplicates styles instead of merging

B. Because @extend only works with placeholder selectors

C. Because @extend merges all selectors that extend .btn into one group

D. Because @extend cannot be used with classes

Solution

1. Step 1: Understand how @extend merges selectors

   All selectors extending .btn are merged into one combined selector group in the output CSS.

2. Step 2: Identify why unexpected combinations happen

   Since both .special-btn and .btn-primary extend .btn, their selectors get merged, causing combined selectors.

3. Final Answer:

   Because @extend merges all selectors that extend .btn into one group -> Option C

4. Quick Check:

   @extend merges selectors = B [OK]

Hint: Multiple extends on one selector merge all selectors together [OK]

Common Mistakes:

• Thinking @extend duplicates styles
• Believing @extend only works with placeholders
• Assuming @extend cannot be used with classes

5. You want to reuse styles but avoid unwanted CSS output from @extend. Which approach is best?

hard

A. Use @extend inside media queries only

B. Use @extend on regular classes only

C. Duplicate styles manually instead of using @extend

D. Use placeholder selectors (e.g., %base-style) and extend them

Solution

1. Step 1: Understand placeholder selectors

   Placeholder selectors start with % and do not output CSS unless extended.

2. Step 2: Why use placeholders with @extend

   Extending placeholders avoids unwanted CSS output because placeholders themselves don't generate CSS.

3. Step 3: Evaluate other options

   Extending regular classes merges selectors and outputs all styles, duplicating styles is inefficient, and limiting @extend to media queries doesn't solve unwanted output.

4. Final Answer:

   Use placeholder selectors (e.g., %base-style) and extend them -> Option D

5. Quick Check:

   Placeholders prevent unwanted CSS output = A [OK]

Hint: Use %placeholders with @extend to avoid extra CSS [OK]

Common Mistakes:

• Extending regular classes causing large CSS output
• Copy-pasting styles instead of reusing
• Misusing @extend inside media queries