Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does "@extend must be used with a %placeholder" mean?

Tags:

css

sass

lint

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.

like image 797
AngryHacker Avatar asked Jan 08 '19 01:01

AngryHacker


1 Answers

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;
}

like image 199
Greg Avatar answered Oct 14 '22 07:10

Greg