我想在这些方面构建一些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.
