SASS Placeholder Selectors

In SASS, placeholder selectors are used for creating reusable styles without adding unnecessary code to the final compiled CSS. They are similar to mixins but without arguments.

The key difference is that placeholders do not get compiled into the final CSS unless explicitly used with the @extend directive.

What Are Placeholder Selectors?

A placeholder selector is defined using the % symbol. These selectors hold reusable styles that you can apply to other selectors using the @extend rule. The main advantage of placeholder selectors is that they are not included in the compiled CSS file unless extended, helping to keep the CSS file clean and efficient.

Syntax:

%placeholder-name {
 /* Property declarations */
}

How to Use Placeholder Selectors

To use a placeholder selector, you apply the @extend at-rule inside another selector. This copies the styles from the placeholder selector into the current selector, effectively sharing styles between multiple selectors.

Syntax for Using @extend:

@extend %placeholder-name;

Example: Let’s see how to define and use a placeholder selector in a SASS file.

%button-format {
 padding: 10px 20px;
 border-radius: 15px;
 color: black;
}

.toolbar-button {
 @extend %button-format;
 background-color: lightpink;

 &:hover {
 background-color: rgb(155, 106, 114);
 }
}

.status-bar-button {
 @extend %button-format;
 background-color: lightblue;

 &:hover {
 background-color: blue;
 }
}

Compiled CSS file:

.status-bar-button, .toolbar-button {
 padding: 10px 20px;
 border-radius: 15px;
 color: black;
 }

 .toolbar-button {
 background-color: lightpink;
 }
 .toolbar-button:hover {
 background-color: #9b6a72;
 }

 .status-bar-button {
 background-color: lightblue;
 }
 .status-bar-button:hover {
 background-color: blue;
 }

Use of Placeholder Selectors

• Efficiency: Placeholder selectors are excluded from the compiled CSS until they are extended, making them ideal for reusable styles. This reduces redundancy and keeps your CSS file smaller.
• Modularity: They are particularly useful in creating SASS libraries or component-based architectures, where you can define reusable blocks of styles that can be easily applied across different components.
• Maintainability: When using placeholder selectors, you can update common styles in one place, and all elements extending that placeholder will automatically inherit those updates.

The SASS Placeholder Selectors provide a powerful and efficient way to manage and reuse styles across your project. By using % placeholders and @extend, you can build cleaner, more maintainable stylesheets that are optimized for performance.