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.

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