Что означает «@extend необходимо использовать с заполнителем%»?

Это относится к мнению, что использование @extend с обычными селекторами CSS - плохая идея.

Я лично согласен с этим мнением, но, тем не менее, это мнение. Использование @extend с любым типом селектора - это то, что позволяет спецификация Sass, поэтому я, возможно, свяжусь с разработчиками вашего линтера и попросу, чтобы терминология в вашей ошибке объяснила это.

Если вы используете @extend для расширения определения селектора, каждый раз, когда селектор расширяется, он компилируется в CSS, который включает ссылку на селектор каждый раз, когда используется ключевое слово @extend.

Если, однако, вы используете @extend с селекторами-заполнителями, начинающимися с % (так называемые «тихие классы»), функциональность будет в большей степени соответствовать передовой практике. Во-первых, любые неиспользуемые селекторы-заполнители даже не отображаются в окончательном CSS (отлично подходит для создания повторно используемых библиотек дизайна).

Например, если у вас есть блок многократно используемого содержимого в селекторе CSS, подумайте о его преобразовании для использования вместо него селектора заполнителя:

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