Why Placeholder selectors with % in SASS? - Purpose & Use Cases

The Big Idea

What if you could fix all your button styles by changing just one line of code?

The Scenario

Imagine you are styling many buttons on a website. You want them all to share the same basic look, like color and padding, so you copy and paste the same CSS rules into each button style.

The Problem

When you want to change the shared style, you have to update every single button style manually. This is slow, easy to forget, and can cause inconsistent designs.

The Solution

Placeholder selectors with % let you write shared styles once and reuse them by extending. This means you keep your code clean and easy to update.

Before vs After

✗ Before

.btn-primary { color: white; padding: 1rem; }
.btn-secondary { color: white; padding: 1rem; }

✓ After

%button-base { color: white; padding: 1rem; }
.btn-primary { @extend %button-base; }
.btn-secondary { @extend %button-base; }

What It Enables

You can create reusable style blocks that keep your CSS DRY (Don't Repeat Yourself) and easy to maintain.

Real Life Example

On a website with many types of buttons, you can change the base button style in one place, and all buttons update automatically.

Key Takeaways

Copy-pasting styles is slow and error-prone.

Placeholder selectors let you write shared styles once.

Extending placeholders keeps your CSS clean and easy to update.

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