css - "@extend must be used with a %placeholder"是什么意思？

在插入以下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与常规CSS选择器一起使用是一个坏主意。

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

如果使用@extend扩展选择器的定义，则每次扩展选择器时都会编译为CSS，该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;
}

关于css - "@extend must be used with a %placeholder"是什么意思？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54084022/