SASS / SCSS @extend规则选择器

番长猴子2020-03-24

我在@extend规则上有一个小问题，这就是我得到的（专注于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 */
}

但是似乎@extend不喜欢这种方法，还有别的方法可以编写这种方法h1吗？

宝儿L2020/03/24 18:14:38

一个明显的解决方案是@mixin your-name为您的.content-header h1定义和@include your-name内部定义一个新名称.box-header h1。

但是，有一个更好的解决方案：引用父选择器：＆：

h1 {
    .content-header &,
    .box-header & {
        // CSS properties
    }
    .box-header & {
        // And his own CSS properties
    }
}

这不是很明显，因为逻辑是相反的，但是最好保持。您正在更改h1特定选择器的定义。

番长斯丁逆天2020/03/24 18:14:38

嵌套选择器无法扩展-实际上，这就是解析器报告的语法错误。除了结构性评论（我不认为@extend有必要保证上述关系的情况），这不是SASS当前可以完成的事情。

注意：这是Stylus支持的，但是如果您愿意的话。

2020/03/24 18:14:38

如前所述，您只能扩展一个类。通常，应跳过带有扩展的嵌套。有更多的关于延长其在选择这个文本。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer