在检查以下 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 选择器一起使用是一个坏主意的观点。
我个人同意这个观点,但它仍然是一个观点。将 @extend
与任何类型的选择器一起使用是 Sass 规范允许的,因此我可能会与您的 linter 的维护者取得联系,并要求您的错误中的术语对此进行解释。
如果您使用@extend
来扩展选择器的定义,则每次选择器被扩展时都会被编译为CSS,其中包括每次@extend 时选择器的引用
使用关键字。
但是,如果您将 @extend
与以 %
(也称为“静默类”)开头的占位符选择器一起使用,则该功能更符合最佳实践。首先,任何未使用的占位符选择器甚至都不会呈现为最终的 CSS(非常适合构建可重用的设计库)。
例如,如果您在 CSS 选择器中有一 block 可重用的内容,请考虑将其转换为使用占位符选择器:
.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/