Placeholder selectors with % in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a placeholder selector named %button-style.

SASS

%[1] {
  background-color: blue;
  color: white;
  padding: 1rem;
}

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

Abtn

Bstyle

Cbutton

Dbutton-style

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the percent sign (%) before the name.

Using a class selector (.) instead of a placeholder (%).

Using a name that doesn't match the instruction.

The placeholder selector is named %button-style, so you fill in 'button-style' after the % sign.

2fill in blank

medium

Complete the code to extend the placeholder %button-style inside the .primary-button class.

SASS

.primary-button {
  @extend [1];
  border-radius: 0.5rem;
}

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

A%button-style

Bbutton-style

C.button-style

D#button-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class selector (.) instead of a placeholder (%) in @extend.

Omitting the percent sign (%) in the @extend statement.

Writing the placeholder name without any selector symbol.

To extend a placeholder selector, use @extend followed by the placeholder name with the percent sign, like %button-style.

3fill in blank

hard

Fix the error in the code by completing the @extend statement correctly.

SASS

.secondary-button {
  @extend [1];
  background-color: gray;
  color: black;
}

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

A%button-style

Bbutton-style

C.button-style

D#button-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class selector (.) instead of a placeholder (%) in @extend.

Leaving out the percent sign (%) in the @extend statement.

The @extend must use the placeholder selector with the percent sign (%), so %button-style is correct.

4fill in blank

hard

Fill both blanks to create a placeholder %card-style and extend it in .card class.

SASS

[1]card-style {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 2rem;
}

.card {
  @extend [2];
  border-radius: 1rem;
}

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

A%

B.

C%card-style

D.card-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class selector (.) instead of % for the placeholder definition.

Extending a class selector instead of the placeholder.

The placeholder selector starts with %, so {{BLANK_1}} is '%'. To extend it, use @extend %card-style.

5fill in blank

hard

Fill all three blanks to define a placeholder %alert-style, extend it in .alert, and add a color property.

SASS

[1]alert-style {
  padding: 1rem;
  border: 1px solid black;
}

.alert {
  @extend [2];
  color: [3];
}

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

A%

B%alert-style

Cred

D.alert-style

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class selector (.) instead of % for the placeholder.

Forgetting the percent sign (%) in the @extend statement.

Using an invalid color name.

Define the placeholder with %, extend it with @extend %alert-style, and set color to 'red'.