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.