While linting the following SASS statements, I get @extend must be used with a %placeholder
warning.
.reg-text {
color: #202226;
font-family: $font-page;
font-size: 17px;
line-height: 25px;
}
.reg-text-header {
@extend .reg-text;
font-weight: 600;
}
What does warning mean and how do I fix it. Afaik, .extend
exists for the purpose of extending classes.
This is referring to an opinion that using @extend
with normal CSS selectors is a bad idea.
I personally agree with this opinion, but it is an opinion nonetheless. Using @extend
with any sort of selector is what the Sass spec allows, so I would possibly get in touch with the maintainers of your linter and request that the terminology in your error explains this.
If you use @extend
to extend the definition of a selector, every time the selector is extended is is compiled to CSS that includes a reference of the selector for every time the @extend
keyword is used.
If, however, you use @extend
with placeholder selectors starting with %
(A.K.A. "Silent Classes"), the functionality is much more in line with best practices. First off, any unused placeholder selectors are not even rendered to the final CSS (great for building reusable design libraries).
For example, if you have a block of reusable content within a CSS selector, consider converting it to use a placeholder selector instead:
.reg-text {
color: #202226;
font-family: $font-page;
font-size: 17px;
line-height: 25px;
}
.reg-text-header {
@extend .reg-text; // this is inefficient and causes specificity issues!
font-weight: 600;
}
// Instead, do this:
%reg-text {
color: #202226;
font-family: $font-page;
font-size: 17px;
line-height: 25px;
}
div.your-actual-selector-on-the-page .reg-text {
@extend %reg-text;
}
div.your-actual-selector-on-the-page .reg-text-header {
@extend %reg-text; // This compiles much neater and doesn't get in the way of specificity.
font-weight: 600;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With