SCSS by Example: Placeholders
Defining silent selectors for extension-only styles with this sample code showing placeholder syntax using percent sign, how placeholders are excluded from compiled CSS unless extended, and efficient style sharing patterns.
Code
// Define a placeholder using %
%box-shared {
border: 1px solid #ccc;
padding: 15px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
// Placeholders are NOT output to CSS on their own
.article {
@extend %box-shared;
background: white;
}
.sidebar {
@extend %box-shared;
background: #f9f9f9;
}Explanation
Placeholder selectors are denoted by the percent sign % prefix and function as "silent" classes that are not included in the compiled CSS output unless explicitly extended. This makes them ideal for defining reusable style patterns without polluting the final stylesheet with unused selectors. When a placeholder is extended, SCSS groups all extending selectors together in the compiled output, just as it does with regular @extend.
The key difference between placeholders and regular classes is their compilation behavior. A regular class like .box-shared would appear in the final CSS even if never used in HTML, while %box-shared only generates output when extended. This results in leaner CSS files, as only the styles actually needed are included. The compiled output for the example would be .article, .sidebar { ...shared styles... } with no reference to %box-shared.
Placeholders are particularly valuable in component libraries and design systems where you want to define a palette of reusable styles without forcing consumers to use specific class names. They enable a pattern where implementation details remain hidden while providing extension points for customization. Placeholders can be extended multiple times, and each extension creates a new entry in the grouped selector list.
Code Breakdown
%box-shared defines placeholder selector using percent sign prefix.@extend %box-shared; includes placeholder styles in .article selector..article, .sidebar { ... } without %box-shared in output.@extend add to or override placeholder styles.