sass Extend / Inheritance Placeholders
Example
Sometimes you will create classes that won't be used in their own right, rather only be extended inside other rule sets. This means that the compiled CSS file will be larger than it needs to be. Placeholder selectors solve this problem.
Placeholder selectors are similar to class selectors, but they use the percent character (%) instead of the (.) used for classes. They will not show up in the compiled CSS.
%button {
border: 5px solid black;
border-radius: 5px;
margin: 0;
}
.error-button {
@extend %button;
background-color: #FF0000;
}
.success-button {
@extend %button;
background-color: #00FF00;
}
This will compile to the following CSS:
.error-button, .success-button {
border: 5px solid black;
border-radius: 5px;
margin: 0;
}
.error-button {
background-color: #FF0000;
}
.success-button {
background-color: #00FF00;
}
