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.

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