SASS / SCSS @extend规则选择器 [英] SASS / SCSS @extend rule selectors

问题描述

我对@extend规则有一点问题，这是我得到的（关注h1）：

I'm having a little problem with the @extend rule, this is what I got (focus on the h1):

.content-header {
    // CSS properties
    h1 {
        // CSS properties
    }
}

.box-header {
    // CSS properties
    h1 {
        @extend .content-header h1; // My selector problem!
        // And his own CSS properties
    }
}

所以它将是：

.content-header h1, .box-header h1 {
    /* Happily sharing the same CSS properties */
}

但它看起来像 @扩展不喜欢，是任何其他方式写，而不给予 h1 一个类

But it seems like @extend don't like that, is any other way to write this without giving the h1 a class??

推荐答案

嵌套选择器不能扩展 - 实际上，这是解析器报告的语法错误。结构化注释（我不能想到上面的 @extend 关系是保证的），这不是目前可以用SASS完成的。

Nested selectors cannot be extended - in fact, that's the syntax error that is reported by the parser. Structural comments aside (I can't think of a scenario where the above @extend relationship is warranted), this is not something that can be currently accomplished with SASS.

注意：这是 Stylus 支持的你可以接受。

NB: this is, however supported by Stylus if you're open to it.

这篇关于SASS / SCSS @extend规则选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！