Extend limitations and gotchas in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend a placeholder selector in Sass.

SASS

%button-style { color: blue; }
.btn { [1] %button-style; }

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

A@extend

B@use

C@mixin

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend for placeholders.

Trying to extend a class instead of a placeholder.

In Sass, to reuse styles from a placeholder selector, you use @extend followed by the placeholder name.

2fill in blank

medium

Complete the code to extend multiple selectors in Sass.

SASS

.alert { [1] .error, .warning; }

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

A@extend

B@include

C@mixin

D@forward

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend for selectors.

Not separating selectors with commas.

You can extend multiple selectors by listing them after @extend separated by commas.

3fill in blank

hard

Fix the error in the code by completing the blank to correctly extend a placeholder inside a nested selector.

SASS

.card {
  [1] %base-style;
  padding: 1rem;
}

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

A@include

B@extend

C@mixin

D@use

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend inside nested selectors.

Trying to use @mixin without defining it first.

Inside nested selectors, you still use @extend to inherit styles from placeholders.

4fill in blank

hard

Fill both blanks to create a map and extend a placeholder from it.

SASS

$styles: (
  button: '%btn-style',
  alert: '%alert-style'
);

.btn {
  $[1]: map-get($styles, 'button');
  [2] #{$ [1];
}

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

Aplaceholder

B@extend

Cstyle

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use @include instead of @extend for placeholders.

Not storing the placeholder in a variable before extending.

You first get the placeholder from the map into a variable, then use @extend to apply it.

5fill in blank

hard

Fill all three blanks to correctly extend a placeholder and avoid selector duplication.

SASS

%base-style {
  color: red;
}

.btn-primary {
  [1] %base-style;
  background: blue;
}

.btn-secondary {
  [2] %base-style;
  background: gray;
}

// To avoid duplication, use [3] to combine selectors.

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

A@extend

B@mixin

C@at-root

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include instead of @extend for placeholders.

Not using @at-root to avoid duplicated selectors.

Use @extend to share styles from the placeholder. Use @at-root to avoid nested selector duplication.