多个嵌套选择器，变量在Less中 [英] multiple nested selectors with variables in Less

问题描述

我想按照以下方式构建一些CSS：

  h1，h2，h3，h4，h5，h6规则} 
 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 {另一个规则;} 
  

这将是有用的，如果我可以创建一个变量：

  @headings：h1，h2，h3，h4，h5，h6; 
  

然后可能会这样做：

  @ {headings} {
&不幸的是，这给了我
：{color：inherit;} 
} 
  
 
 
  h1，h2，h3，h4，h5，h6 a {
 color：inherit; 
} 
  
我想要的是什么？这是我想做的一个简单的版本，但我也会发现有用的HTML输入类型和多个选择器的其他实例经常出现在一起。
解决方案
 ＃1  
除了@ helderdarocha的答案和 http://stackoverflow.com/a/23954580/2712740 。也许这个可以看起来更清楚：
  //像以往一样定义头列表
 // put一个具有一些预定义名称的mixin调用
 h1，h2，h3，h4，h5，h6 {.headings} 
 
 //现在添加styles / childs到头列表中mixin定义：
 
 .headings（）{
 some：rule; 
} 
 
 .headings（）{
a {color：inherit} 
} 
 
。 {another：rule} 
} 
 
 //等。
  
此解决方案的局限性是应定义 h1，h2，h3 ... {} 和 .headings 在同一水平。此外，重要的是要记住，所有这些样式将输出到CSS  h1，h2，h3 ... {} 定义不在 .headings 定义，因此如果您有某些定义，则可能会中断您的级联覆盖。
 
 
 
 
 
 
 ＃2  
 alt。解决方案我从 http://stackoverflow.com/a/23954580/2712740 ＃3复制粘贴，与＃1 相同，但不包含其限制（只包含更多特殊的可怕符号）：
  // thevariable：
 .headings（@  - ）{
 h1，h2，h3，h4，h5，h6 
 {@  - （）;}} 
 
 
 //用法：
 
。标题（{
 some：rule; 
}）; 
 
 .headings（{
 a {color：inherit} 
}）; 
 
 .headings（{
 span {another：rule} 
}）; 
 
 //等。 
  
 
I want to build some CSS along these lines: 
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;}
It would be useful if I could create a variable like this:
@headings: h1,h2,h3,h4,h5,h6;
and then maybe do something like this:
@{headings} {
  & a {color: inherit;}
}
Unfortunately this gives me: 
h1, h2, h3, h4, h5, h6 a {
  color: inherit;
}
Is what I want possible? This is a simple version of what I want to do but I would also find useful for working with HTML input types and other instances of multiple selectors that often appear together.
解决方案
#1
Just yet one more solution in addition to @helderdarocha's answer and those given in http://stackoverflow.com/a/23954580/2712740. Maybe be this one could look a bit more clear:
// define header list as usual just
// put a mixin call with some predefined name there
h1, h2, h3, h4, h5, 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.
The limitation of this solution is that h1, h2, h3 ... {} and .headings should be defined at the same level. Additionally, it's important to keep in mind that all these styles will output to CSS at the point of h1, h2, h3 ... {} definition not at the point of .headings definitions, so it may break your cascading overrides if you have some).



#2
The alt. solution I'm copy-pasting from http://stackoverflow.com/a/23954580/2712740 #3, basicaly it's the same as #1 but w/o its limitations (just having more special scary symbols):
// the "variable":
.headings(@-) {
    h1, h2, h3, h4, h5, h6
        {@-();}}


// usage:

.headings({
    some: rule;
});

.headings({
    a {color: inherit}
});

.headings({
    span {another: rule}
});

//etc.


                        
这篇关于多个嵌套选择器，变量在Less中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！