Placeholder selectors with % in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code using placeholder selectors?

Given the Sass code below, what CSS will be generated after compilation?

SASS

%button-style {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}

.btn-primary {
  @extend %button-style;
  font-weight: bold;
}

.btn-secondary {
  @extend %button-style;
  background-color: gray;
}

A

.btn-primary {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
  font-weight: bold;
}
.btn-secondary {
  background-color: gray;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

B

.btn-primary {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
  font-weight: bold;
}
.btn-secondary {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: gray;
  color: white;
}

C

.btn-primary, .btn-secondary {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}
.btn-primary {
  font-weight: bold;
}
.btn-secondary {
  background-color: gray;
}

D

.btn-primary, .btn-secondary {
  padding: 1rem;
  border-radius: 0.5rem;
  color: white;
}
.btn-primary {
  background-color: blue;
  font-weight: bold;
}
.btn-secondary {
  background-color: gray;
}

💡 Hint

Remember that @extend merges selectors sharing the placeholder styles.

The placeholder selector %button-style is not output directly. Instead, its styles are merged into selectors that extend it. Both .btn-primary and .btn-secondary share the base styles, so they are grouped together. Then, their unique styles are added separately.

🧠 Conceptual

intermediate

Why use placeholder selectors (%) in Sass instead of regular classes?

Which of the following is the main reason to use placeholder selectors (%) in Sass?

A They generate CSS classes that can be styled directly in HTML.

B They allow sharing styles without generating extra CSS selectors unless extended.

C They automatically add vendor prefixes to CSS properties.

D They create JavaScript variables for styling.

💡 Hint

Think about how placeholders affect the final CSS output.

Placeholder selectors let you write reusable styles that only appear in the final CSS if they are extended. This helps keep CSS smaller and avoids unused styles.

❓ selector

advanced

What happens if you extend a placeholder selector multiple times in Sass?

Consider this Sass code: %card { border: 1px solid black; padding: 1rem; } .card-primary { @extend %card; background: white; } .card-secondary { @extend %card; background: lightgray; } What will the compiled CSS selectors look like for the shared styles?

A

.card-primary, .card-secondary {
  border: 1px solid black;
  padding: 1rem;
}
.card-primary {
  background: white;
}
.card-secondary {
  background: lightgray;
}

B

%card {
  border: 1px solid black;
  padding: 1rem;
}
.card-primary {
  @extend %card;
  background: white;
}
.card-secondary {
  @extend %card;
  background: lightgray;
}

C

.card-primary {
  border: 1px solid black;
  padding: 1rem;
  background: white;
}
.card-secondary {
  border: 1px solid black;
  padding: 1rem;
  background: lightgray;
}

D

.card-primary, .card-secondary, %card {
  border: 1px solid black;
  padding: 1rem;
}
.card-primary {
  background: white;
}
.card-secondary {
  background: lightgray;
}

💡 Hint

Remember placeholders do not appear in the final CSS, only selectors that extend them.

When multiple selectors extend the same placeholder, Sass groups those selectors together for the shared styles. The placeholder itself does not appear in the CSS.

❓ layout

advanced

How can placeholder selectors help reduce CSS duplication in complex layouts?

You have multiple card components with similar padding, border, and shadow styles. Which Sass approach best reduces repeated CSS code?

A Create separate CSS files for each card and import them.

B Write the same styles inside each card class separately.

C Use inline styles in HTML for each card component.

D Use a placeholder selector with shared styles and extend it in each card class.

💡 Hint

Think about how Sass placeholders help reuse styles without extra CSS selectors.

Using a placeholder selector with shared styles and extending it in each card class avoids repeating the same CSS rules multiple times, keeping the CSS smaller and easier to maintain.

❓ accessibility

expert

How do placeholder selectors (%) in Sass affect accessibility when styling focus states?

You want to create consistent focus styles for buttons using a placeholder selector. Which statement is true about accessibility and placeholder selectors?

A Using placeholder selectors for focus styles ensures all buttons share the same accessible focus outline without extra CSS duplication.

B Placeholder selectors automatically add ARIA attributes to elements for accessibility.

C Placeholder selectors cannot style focus states because they do not generate CSS selectors.

D Focus styles must be written inline in HTML for accessibility, so placeholders are irrelevant.

💡 Hint

Think about how shared styles help maintain consistent focus outlines for keyboard users.

Placeholder selectors let you define focus styles once and share them across multiple selectors by extending. This helps keep focus outlines consistent, which is important for keyboard navigation and accessibility.

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