我想在这些方面构建一些CSS：
h1,h2,h3,h4,h5,h6 {some rule}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color: inherit;}
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span {another rule;}
如果我可以创建一个这样的变量将是有用的：
@headings: h1,h6;
然后可能做这样的事情：
@{headings} {
& a {color: inherit;}
}
不幸的是,这给了我：
h1,h6 a {
color: inherit;
}
我想要的是什么？这是我想要做的简单版本,但我也觉得有用的是处理HTML输入类型和经常出现在一起的多个选择器的其他实例.
解决方法
#1
除了@ helderdarocha的答案和 https://stackoverflow.com/a/23954580/2712740中给出的答案之外,还有一个解决方案.也许这个可能看起来更清楚一点：
除了@ helderdarocha的答案和 https://stackoverflow.com/a/23954580/2712740中给出的答案之外,还有一个解决方案.也许这个可能看起来更清楚一点：
// define header list as usual just
// put a mixin call with some predefined name there
h1,h6 {.headings}
// now to add styles/childs to the header list just add the mixin definitions:
.headings() {
some: rule;
}
.headings() {
a {color: inherit}
}
.headings() {
span {another: rule}
}
// etc.
该解决方案的局限性在于h1,h3 …… {}和.headings应该定义在同一级别.另外,重要的是要记住,所有这些样式都会在h1,h3 … {}定义的位置输出到CSS,而不是在.headings定义的位置,因此如果你有,它可能会破坏你的级联覆盖一些).
#2
alt.解决方案我是从https://stackoverflow.com/a/23954580/2712740#3复制粘贴,基本上它与#1相同但没有限制(只有更多特殊的可怕符号)：
// the "variable":
.headings(@-) {
h1,h6
{@-();}}
// usage:
.headings({
some: rule;
});
.headings({
a {color: inherit}
});
.headings({
span {another: rule}
});
//etc.
