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'.

Practice

1. What is the main purpose of a placeholder selector in Sass, which starts with %?

easy

A. To hold reusable styles that can be extended by other selectors

B. To create a new HTML element

C. To define a variable for colors

D. To write comments in Sass code

Solution

1. Step 1: Understand what placeholder selectors do

   Placeholder selectors start with % and are used to hold styles that are not output directly but can be reused.

2. Step 2: Identify their usage

   They are extended by other selectors using @extend to apply the stored styles without duplicating CSS.

3. Final Answer:

   To hold reusable styles that can be extended by other selectors -> Option A

4. Quick Check:

   Placeholder selectors = reusable styles [OK]

Hint: Remember % means reusable style block [OK]

Common Mistakes:

• Thinking % creates HTML elements
• Confusing % with variables
• Using % for comments

2. Which of the following is the correct syntax to extend a placeholder selector named %button-style inside a Sass rule?

easy

A. button { @include %button-style; }

B. button { extend %button-style; }

C. button { @extend %button-style; }

D. button { %button-style; }

Solution

1. Step 1: Recall the syntax for extending placeholders

   In Sass, to apply styles from a placeholder, you use @extend %placeholder-name; inside a selector.

2. Step 2: Check each option

   button { @extend %button-style; } uses @extend %button-style; correctly. The other options use incorrect keywords or syntax.

3. Final Answer:

   button { @extend %button-style; } -> Option C

4. Quick Check:

   @extend %placeholder-name; = correct syntax [OK]

Hint: Use @extend with % to reuse styles [OK]

Common Mistakes:

• Using @include instead of @extend
• Omitting the @ symbol
• Writing %button-style without @extend

3. Given the Sass code:

%alert { color: red; font-weight: bold; }
.warning { @extend %alert; background: yellow; }

What CSS will be generated?

medium

A. %alert { color: red; font-weight: bold; }
.warning { background: yellow; }

B. .alert, .warning { color: red; font-weight: bold; background: yellow; }

C. .warning { background: yellow; }
%alert { color: red; font-weight: bold; }

D. .warning { color: red; font-weight: bold; background: yellow; }

Solution

1. Step 1: Understand placeholder output

   Placeholder selectors do not output CSS themselves. Their styles are included only when extended.

2. Step 2: Analyze the @extend usage

   The .warning class extends %alert, so it gets the styles from %alert plus its own background style.

3. Final Answer:

   .warning { color: red; font-weight: bold; background: yellow; } -> Option D

4. Quick Check:

   Placeholder styles appear only in extended selectors [OK]

Hint: Placeholder styles appear only when extended [OK]

Common Mistakes:

• Expecting %alert to appear in CSS
• Thinking styles duplicate without extend
• Confusing @extend with @include

4. Identify the error in this Sass code:

%card-style {
  border: 1px solid black;
}
.card {
  extend %card-style;
  padding: 1rem;
}

medium

A. Padding property is not allowed here

B. Missing @ symbol before extend

C. Placeholder selector name is invalid

D. Border property should be inside .card, not %card-style

Solution

1. Step 1: Check the syntax of @extend

   The correct syntax requires the @ symbol before extend to work properly.

2. Step 2: Identify the error in the code

   The code uses extend %card-style; without @, causing a syntax error.

3. Final Answer:

   Missing @ symbol before extend -> Option B

4. Quick Check:

   @extend must have @ symbol [OK]

Hint: Always use @ before extend keyword [OK]

Common Mistakes:

• Omitting @ before extend
• Misnaming placeholder selectors
• Misplacing properties inside placeholders

5. You want to create two button styles, .primary-btn and .secondary-btn, sharing common styles but with different colors. Which Sass code correctly uses placeholder selectors to avoid repeating common styles?

hard

A. %btn-common {
padding: 1rem;
border-radius: 0.5rem;
}
.primary-btn {
@extend %btn-common;
background-color: blue;
color: white;
}
.secondary-btn {
@extend %btn-common;
background-color: gray;
color: black;
}

B. .btn-common {
padding: 1rem;
border-radius: 0.5rem;
}
.primary-btn {
@extend .btn-common;
background-color: blue;
color: white;
}
.secondary-btn {
@extend .btn-common;
background-color: gray;
color: black;
}

C. %btn-common {
padding: 1rem;
border-radius: 0.5rem;
background-color: blue;
}
.primary-btn {
@extend %btn-common;
color: white;
}
.secondary-btn {
@extend %btn-common;
background-color: gray;
color: black;
}

D. %btn-common {
padding: 1rem;
border-radius: 0.5rem;
}
.primary-btn {
background-color: blue;
color: white;
}
.secondary-btn {
background-color: gray;
color: black;
}

Solution

1. Step 1: Identify the correct use of placeholder selectors

   Placeholder selectors start with % and hold common styles to be extended by other selectors.

2. Step 2: Check each option for correct reuse and color overrides

   %btn-common {
     padding: 1rem;
     border-radius: 0.5rem;
   }
   .primary-btn {
     @extend %btn-common;
     background-color: blue;
     color: white;
   }
   .secondary-btn {
     @extend %btn-common;
     background-color: gray;
     color: black;
   }

   correctly defines %btn-common with shared styles and extends it in both buttons, adding different colors separately.

   .btn-common {
     padding: 1rem;
     border-radius: 0.5rem;
   }
   .primary-btn {
     @extend .btn-common;
     background-color: blue;
     color: white;
   }
   .secondary-btn {
     @extend .btn-common;
     background-color: gray;
     color: black;
   }

   incorrectly uses a class instead of a placeholder.

   %btn-common {
     padding: 1rem;
     border-radius: 0.5rem;
     background-color: blue;
   }
   .primary-btn {
     @extend %btn-common;
     color: white;
   }
   .secondary-btn {
     @extend %btn-common;
     background-color: gray;
     color: black;
   }

   mixes shared and specific colors in the placeholder, causing unwanted style inheritance.

   %btn-common {
     padding: 1rem;
     border-radius: 0.5rem;
   }
   .primary-btn {
     background-color: blue;
     color: white;
   }
   .secondary-btn {
     background-color: gray;
     color: black;
   }

   does not use placeholders at all, repeating styles.

3. Final Answer:

   %btn-common placeholder with @extend usage in both buttons -> Option A

4. Quick Check:

   Use %placeholder for shared styles, extend and override colors [OK]

Hint: Put shared styles in %placeholder, extend, then add unique styles [OK]

Common Mistakes:

• Using classes instead of placeholders for shared styles
• Putting unique styles inside the placeholder
• Not using @extend to reuse styles