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

Question

在检查以下 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 的存在是为了扩展类.

Answer 1

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

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

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

但是，如果您将 @extend 与以 % (A.K.A. "Silent Classes") 开头的占位符选择器一起使用，则该功能更符合最佳实践.首先，任何未使用的占位符选择器甚至都不会呈现到最终 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;
}

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

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

css

lint

sass