Placeholder selectors with % in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a placeholder selector in Sass?

A placeholder selector in Sass is a special selector that starts with %. It is not rendered directly in the CSS but can be extended by other selectors to share styles.

beginner

How do you define a placeholder selector in Sass?

You define a placeholder selector by starting the selector name with %, for example: %button-style { color: blue; }.

intermediate

What is the main benefit of using placeholder selectors with % in Sass?

They help avoid repeating CSS code by allowing multiple selectors to share the same styles without generating extra CSS for the placeholder itself.

beginner

How do you use a placeholder selector in another selector?

You use the @extend directive to include the styles from a placeholder selector. For example: .btn {@extend %button-style;}.

intermediate

What happens if you define a placeholder selector but never extend it?

No CSS is generated for that placeholder selector because it only outputs styles when extended by other selectors.

What symbol starts a placeholder selector in Sass?

A %

B #

C .

D &

Placeholder selectors always start with the percent sign % in Sass.

Which Sass directive is used to apply styles from a placeholder selector?

A @extend

B @include

C @mixin

D @import

The @extend directive is used to inherit styles from a placeholder selector.

If a placeholder selector is not extended, what CSS is generated?

A The placeholder styles are output as a class selector

B An error occurs

C No CSS is generated

D CSS with the placeholder selector name

Placeholder selectors only generate CSS when extended; otherwise, no CSS is output.

Which of these is a valid placeholder selector?

A .nav-item

B %nav-item

C #nav-item

D &nav-item

Placeholder selectors start with %, so %nav-item is valid.

Why use placeholder selectors instead of regular classes?

A To style HTML elements directly

B To make styles inline

C To add JavaScript behavior

D To create reusable styles without extra CSS output

Placeholder selectors help reuse styles without generating extra CSS selectors.

Explain how placeholder selectors with % work in Sass and why they are useful.

Think about sharing styles without extra CSS code.

Describe the difference between a placeholder selector and a regular class selector in Sass.

Focus on CSS output and reuse.