@extend directive in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make .button inherit styles from .base using @extend.

SASS

.base {
  color: blue;
}

.button {
  [1] .base;
  background: white;
}

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

A@extend

B@import

C@mixin

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend

Forgetting the semicolon after @extend

Trying to use @mixin without defining one

The @extend directive allows .button to inherit styles from .base.

2fill in blank

medium

Complete the code to extend .alert styles in .error.

SASS

.alert {
  border: 1px solid red;
  padding: 1rem;
}

.error {
  [1] .alert;
  background-color: pink;
}

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

A@mixin

B@include

C@extend

D@import

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include without a mixin

Writing @extend without the selector

Missing the semicolon after @extend

@extend is used to inherit styles from .alert inside .error.

3fill in blank

hard

Fix the error by completing the code to extend .card styles in .profile-card.

SASS

.card {
  box-shadow: 0 0 5px gray;
  padding: 2rem;
}

.profile-card {
  [1] .card;
  border-radius: 0.5rem;
}

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

A@mixin

B@include

C@import

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the semicolon after @extend

Using @include instead of @extend

Not specifying the selector after @extend

The @extend directive must be followed by a selector and a semicolon to work correctly.

4fill in blank

hard

Fill both blanks to extend .base styles in .primary and add a color.

SASS

.base {
  font-size: 1rem;
  font-weight: bold;
}

.primary {
  [1] .base;
  color: [2];
}

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

A@extend

Bred

Cblue

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend

Choosing an invalid color value

Forgetting the semicolon after @extend

@extend .base; shares styles, and color: blue; sets the text color.

5fill in blank

hard

Fill all three blanks to create a class .highlight that extends .text, sets color, and font-weight.

SASS

.text {
  font-size: 1.2rem;
  font-weight: normal;
}

.highlight {
  [1] .text;
  color: [2];
  font-weight: [3];
}

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

A@include

Bred

Cbold

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend

Using invalid font-weight values

Forgetting semicolons

@extend .text; inherits styles, color: red; sets text color, and font-weight: bold; makes text bold.

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