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

时间:2019-01-08 01:10:31

标签: css sass lint

删除以下SASS语句时,收到scanf(" %c", &guess); 警告。

@extend must be used with a %placeholder

警告是什么意思,我该如何解决。 Afaik,.reg-text { color: #202226; font-family: $font-page; font-size: 17px; line-height: 25px; } .reg-text-header { @extend .reg-text; font-weight: 600; } 的存在是为了扩展类。

1 个答案:

答案 0 :(得分:1)

这是指一种观点,认为将@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;
}