Placeholder selectors with % in SASS - Browser Rendering Trace

Render Flow - Placeholder selectors with %

Read %placeholder selector

↓

Store placeholder in Sass memory

↓

When @extend used

↓

Replace @extend with placeholder styles

↓

Compile to CSS without placeholder selectors

↓

Browser applies compiled CSS

Sass reads the placeholder selector and stores it. When @extend is used, Sass inserts the placeholder styles into the target selectors. The final CSS does not include placeholders, only the extended styles, which the browser renders.

Render Steps - 4 Steps

Code Added:%button-base { padding: 1rem 2rem; border-radius: 0.5rem; font-weight: bold; }

Before

[No styles applied]
[button elements look default]
[Text with default font and spacing]

→

After

[No visible change yet]
[Placeholder styles stored but not applied]
[Buttons still default style]

Placeholder selector %button-base is defined but does not produce CSS or visual changes until extended.

🔧 Browser Action:Sass stores placeholder styles internally; browser sees no CSS change yet.

Code Sample

Two buttons share base styles from a placeholder selector %button-base, extended into .button, .primary, and .secondary classes with different background colors.

SASS

<div class="button primary">Click me</div>
<div class="button secondary">Cancel</div>

SASS

%button-base {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.button {
  @extend %button-base;
  background-color: gray;
  color: white;
}

.primary {
  @extend %button-base;
  background-color: blue;
  color: white;
}

.secondary {
  @extend %button-base;
  background-color: red;
  color: white;
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see on elements with class .button?

A They have padding, rounded corners, gray background, and white bold text

B They remain default with no padding or background

C They have red background and no padding

D They become invisible

Common Confusions - 3 Topics

Why don't I see any CSS for the %button-base selector in the browser?

Placeholder selectors like %button-base do not produce CSS on their own. They only add styles when extended with @extend in other selectors (see render_steps 1 and 2).

💡 Placeholders are invisible until extended; think of them as style templates.

What happens if I use @extend on a normal class instead of a placeholder?

Extending a normal class duplicates its styles in the compiled CSS, which can increase file size. Placeholders avoid this by not outputting CSS unless extended (render_steps 2-4).

💡 Use placeholders for reusable base styles to keep CSS clean.

Why do all buttons share the same padding and font weight even though I only wrote it once?

Because all button classes extend the same placeholder %button-base, they inherit its styles, so the browser renders them with consistent padding and font weight (render_steps 2-4).

💡 Extending placeholders shares styles visually across selectors.

Property Reference

Property	Value Applied	Effect on Visual	Common Use
%placeholder selector	N/A	No direct CSS output; stores reusable styles	Define base styles to extend
@extend %placeholder	N/A	Applies placeholder styles to selector	Reuse styles without duplication
padding	1rem 2rem	Adds space inside element edges	Button spacing
border-radius	0.5rem	Rounds corners	Soft button edges
font-weight	bold	Makes text thicker	Emphasize text
background-color	gray/blue/red	Sets background color	Visual button differentiation
color	white	Sets text color	Contrast with background

Concept Snapshot

%placeholder selectors define reusable style blocks in Sass. They do not output CSS until extended with @extend. @extend inserts placeholder styles into other selectors. This avoids duplicate CSS and keeps styles consistent. Use placeholders for base styles shared by multiple selectors.