使用 less 来定位所有 h 标签

【问题标题】：Using less to target all h tags使用 less 来定位所有 h 标签
【发布时间】：2016-08-08 17:40:57
【问题描述】：

Using the SASS solution as a reference，你如何使用 LESS 做到这一点？

h1, h2, h3,
h4, h5, h6 {
    @extend %headings !optional;
}

然后像这样使用它：

.element > %headings {
    color: red;
}

最终我想在未来这样做：

.something {
    %headings { color: red; }
}

这样它会编译成：

.something h1,
.something h2,
.something h3 { color: red; }

【问题讨论】：

标签： css less

【解决方案1】：

就像链接的答案一样，有很多方法（例如使用extend、循环、parent selector 或未命名的规则集）。

对于您的最后一个 sn-p，最适合的是带有 ruleset as parameter（又名未命名/分离规则集）的 mixin：

// define:
.headings(@style) {
    h1, h2, h3, h4, h5, h6 {
        @style();
    }  
}

// use:
.something {
    .headings({
        color: red;
    });
}

【讨论】：