Chained extensions in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the .button style in .primary-button.

SASS

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

Drag options to blanks, or click blank then click option'

A.btn

B.primary

C.button

D.link

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class name that does not exist like .primary or .btn

Forgetting the dot before the class name

Using @include instead of @extend

The @extend directive is used to inherit styles from another selector. Here, .primary-button extends .button to reuse its styles.

2fill in blank

medium

Complete the code to chain extensions so .alert-button inherits from .button and .alert.

SASS

.alert-button {
  @extend [1];
  @extend .alert;
  color: red;
}

Drag options to blanks, or click blank then click option'

A.button

B.alert-button

C.alert

D.primary-button

Attempts:

3 left

💡 Hint

Common Mistakes

Extending .alert twice

Extending .alert-button inside itself

Using @include instead of @extend

To chain extensions, you extend multiple classes. Here, .alert-button extends .button and .alert to combine their styles.

3fill in blank

hard

Fix the error in the chained extension by completing the missing class to extend.

SASS

.success-button {
  @extend [1];
  @extend .button;
  background-color: green;
}

Drag options to blanks, or click blank then click option'

A.alert

B.primary

C.button

D.success

Attempts:

3 left

💡 Hint

Common Mistakes

Extending .alert instead of .success

Extending .button twice

Forgetting the dot before the class name

The .success-button should extend .success and .button to combine success styles with button styles.

4fill in blank

hard

Fill both blanks to chain extensions so .warning-button inherits from .button and .warning.

SASS

.warning-button {
  @extend [1];
  @extend [2];
  border: 1px solid orange;
}

Drag options to blanks, or click blank then click option'

A.button

B.alert

C.warning

D.primary

Attempts:

3 left

💡 Hint

Common Mistakes

Extending .alert instead of .warning

Extending .primary instead of .button

Using the same class twice

The .warning-button extends both .button and .warning to combine their styles.

5fill in blank

hard

Fill all three blanks to chain extensions so .custom-button inherits from .button, .alert, and .custom.

SASS

.custom-button {
  @extend [1];
  @extend [2];
  @extend [3];
  font-weight: bold;
}

Drag options to blanks, or click blank then click option'

A.button

B.alert

C.custom

D.primary

Attempts:

3 left

💡 Hint

Common Mistakes

Extending .primary instead of .custom

Repeating the same class twice

Forgetting the dot before class names

The .custom-button extends .button, .alert, and .custom to combine all these styles.

Practice

1. What does chaining @extend in Sass allow you to do?

easy

A. Create new CSS properties automatically

B. Make one selector inherit styles from another that already extends a base style

C. Compile Sass into JavaScript

D. Add inline styles directly in HTML

Solution

1. Step 1: Understand @extend basics

   @extend lets one selector reuse styles from another selector or placeholder.

2. Step 2: Recognize chaining effect

   Chaining means a selector extends another selector that itself extends a base style, passing styles along.

3. Final Answer:

   Make one selector inherit styles from another that already extends a base style -> Option B

4. Quick Check:

   Chained @extend = inherit styles step-by-step [OK]

Hint: Think of style inheritance passing through selectors [OK]

Common Mistakes:

• Confusing @extend with creating new CSS properties
• Thinking @extend compiles to JavaScript
• Believing @extend adds inline HTML styles

2. Which of the following is the correct syntax to chain extensions in Sass?

easy

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

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

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

D. .button {@extends %base;}
.primary {@extends .button;}

Solution

1. Step 1: Identify correct @extend syntax

   The correct syntax uses @extend keyword with a percent sign for placeholders and dot for classes.

2. Step 2: Check chaining format

   Chaining means one selector extends a placeholder, another extends that selector, both using @extend.

3. Final Answer:

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

4. Quick Check:

   Correct @extend syntax uses @extend keyword and proper selector symbols [OK]

Hint: Remember to use @extend with % for placeholders and . for classes [OK]

Common Mistakes:

• Omitting the @ symbol before extend
• Using 'extends' instead of 'extend'
• Missing % for placeholders or . for classes

3. Given the Sass code:

%base { color: blue; }
.button {@extend %base; font-weight: bold;}
.primary {@extend .button; background: yellow; }

What CSS will be generated for .primary?

medium

A. .primary { color: blue; font-weight: bold; background: yellow; }

B. .primary { font-weight: bold; background: yellow; }

C. .primary { color: blue; background: yellow; }

D. .primary { background: yellow; }

Solution

1. Step 1: Trace @extend chain

   .button extends %base, so it gets color: blue;. .primary extends .button, so it inherits both color: blue; and font-weight: bold;.

2. Step 2: Combine styles for .primary

   .primary adds background: yellow; to inherited styles, so final CSS includes all three properties.

3. Final Answer:

   .primary { color: blue; font-weight: bold; background: yellow; } -> Option A

4. Quick Check:

   Chained extensions combine all inherited styles [OK]

Hint: Follow the chain from placeholder to final selector [OK]

Common Mistakes:

• Ignoring inherited styles from extended selectors
• Only applying direct styles of .primary
• Confusing placeholders with classes in output

4. What is wrong with this Sass code?

%base { color: red; }
.button { @extend %base }
.primary { @extend .button; }

medium

A. Cannot chain extensions in Sass

B. Cannot extend a placeholder with @extend

C. Class selectors cannot extend placeholders

D. Missing semicolon after @extend %base

Solution

1. Step 1: Check @extend syntax

   Every @extend statement must end with a semicolon. The line @extend %base is missing it.

2. Step 2: Verify chaining and placeholders

   Extending placeholders and chaining extensions are valid in Sass, so no error there.

3. Final Answer:

   Missing semicolon after @extend %base -> Option D

4. Quick Check:

   Always end @extend with semicolon [OK]

Hint: Check for missing semicolons after @extend [OK]

Common Mistakes:

• Thinking chaining extensions is invalid
• Believing placeholders can't be extended
• Forgetting semicolons after statements

5. You want to create a base button style and two variants: .primary and .secondary. Using chained extensions, which Sass code correctly shares the base styles and adds variant colors?

hard

A. %button-base { padding: 1rem; border-radius: 0.5rem; }
.button {@extend %button-base;}
.primary {@extend .button; background: blue;}
.secondary {@extend .button; background: gray;}

B. .button-base { padding: 1rem; border-radius: 0.5rem; }
.primary {@extend .button-base; background: blue;}
.secondary {@extend .button-base; background: gray;}

C. .button-base { padding: 1rem; border-radius: 0.5rem; }
.button {@extend .button-base;}
.primary {@extend .button; background: blue;}
.secondary {@extend .button; background: gray;}

D. %button-base { padding: 1rem; border-radius: 0.5rem; }
.primary {@extend %button-base; background: blue;}
.secondary {@extend %button-base; background: gray;}

Solution

1. Step 1: Use placeholder for base styles

   Base styles should be in a placeholder (%button-base) to avoid generating extra CSS.

2. Step 2: Chain extensions for variants

   .button extends %button-base, then .primary and .secondary extend .button, inheriting base styles and adding colors.

3. Final Answer:

   %button-base { padding: 1rem; border-radius: 0.5rem; } .button {@extend %button-base;} .primary {@extend .button; background: blue;} .secondary {@extend .button; background: gray;} -> Option A

4. Quick Check:

   Use placeholders and chain extensions for clean, reusable styles [OK]

Hint: Put base styles in %placeholder, chain extensions for variants [OK]

Common Mistakes:

• Using class selectors instead of placeholders for base styles
• Not chaining extensions, repeating base styles
• Extending classes that don't extend placeholders