css – 包含Less的变量的多个嵌套选择器

我想在这些方面构建一些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中给出的答案之外,还有一个解决方案.也许这个可能看起来更清楚一点：

// 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.

原文地址：https://www.jb51.cc/css/217401.html