SASS / SCSS \`extend规则选择器

css CSS

番长猴子

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吗？

第3632篇《SASS / SCSS \`extend规则选择器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
宝儿L 2020.03.24

一个明显的解决方案是@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

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

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

null 2020.03.24

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android