“@extend 必须与 %placeholder 一起使用”是什么意思？答案

【问题标题】：What does "@extend must be used with a %placeholder" mean?“@extend 必须与 %placeholder 一起使用”是什么意思？
【发布时间】：2019-06-02 16:28:40
【问题描述】：

在检查以下 SASS 语句时，我收到 @extend must be used with a %placeholder 警告。

.reg-text {
  color: #202226;
  font-family: $font-page;
  font-size: 17px;
  line-height: 25px;
}

.reg-text-header {
  @extend .reg-text;
  font-weight: 600;
}

警告是什么意思，我该如何解决。 Afaik，.extend 的存在是为了扩展类。

【问题讨论】：

这看起来完全合法地使用了@extend：你确定你没有使用某种linting 选项来强制使用%placeholders 和@extend 吗？请参阅：github.com/brackets-userland/brackets-sass-lint/blob/master/… 或 github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/…——我猜你的编译器正在使用这些 linter 之一。
@Terry 我正在查看默认的linting options。功能placeholder-in-extend 已打开。我当然可以关掉它，但我想知道为什么他们认为这是一件坏事。
那是因为如果你不使用占位符，你实际上创建了一个新类，编译器必须用逗号分隔它的所有可能组合。见：thesassway.com/intermediate/understanding-placeholder-selectors

标签： css sass lint

【解决方案1】：

这是指将@extend 与普通 CSS 选择器一起使用是一个坏主意的观点。

我个人同意这个观点，但它仍然是一个观点。 Sass 规范允许将 @extend 与任何类型的选择器一起使用，因此我可能会与您的 linter 的维护者取得联系，并要求您的错误中的术语解释这一点。

如果您使用 @extend 扩展选择器的定义，则每次扩展选择器时都会编译为 CSS，其中包含每次使用 @extend 关键字时选择器的引用。

但是，如果您使用 @extend 和以 % 开头的占位符选择器（A.K.A.“静默类”），则该功能更符合最佳实践。首先，任何未使用的占位符选择器甚至都不会呈现到最终的 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;
}

【讨论】：