Less中带有变量的多个嵌套选择器

Question

我想按照这些思路构建一些 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,h2,h3,h4,h5,h6;

然后可能做这样的事情：

@{headings} {
  & a {color: inherit;}
}

不幸的是，这给了我：

h1, h2, h3, h4, h5, h6 a {
  color: inherit;
}

我想要的可能吗？这是我想做的一个简单版本，但我也发现它对于处理 HTML 输入类型和其他经常一起出现的多个选择器的实例很有用。

Answer 1

#1 除了@helderdarocha 的答案和https://stackoverflow.com/a/23954580/2712740 中给出的答案之外，还有一种解决方案。也许这个看起来会更清楚一点：

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

此方案的局限性在于h1, h2, h3 ... {} 和.headings 应定义在同一级别。此外，重要的是要记住，所有这些样式都将在h1, h2, h3 ... {} 定义点而不是.headings 定义点输出到 CSS，因此如果您有一些可能会破坏您的级联覆盖）。

---

#2 替代品。解决方案我从https://stackoverflow.com/a/23954580/2712740 #3 复制粘贴，基本上它与 #1 相同，但没有限制（只是有更多特殊的可怕符号）：

// the "variable":
.headings(@-) {
    h1, h2, h3, h4, h5, h6
        {@-();}}


// usage:

.headings({
    some: rule;
});

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

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

//etc.

Answer 2

使用规则集

如果您将标题组定义为 ruleset 并使用 mixin 调用来设置属性，那么您可以这样做：

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


& {
    .setProps() {
        & {
            some: rule;
        }
        a {
            color: inherit;
        }
        span {
            another: rule;
        }
    }
    @headings();
}

我已经隔离了& 中的整个内容，以便可以本地化.setProps()（没有它也可以工作，但它将全局设置.setProps()。此外，嵌套的& {} 括号是没有必要，但我发现它有助于显示 @headings 的“默认值”。

如果需要，可以按顺序使用，如下所示：

& {
    .setProps() {  some: rule; }
    @headings();
}
& {
    .setProps() { a {color: inherit;}}
    @headings();
}
& {
    .setProps() { span {another: rule;}}
    @headings();
}

两者都会像这样输出：

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;
}

Answer 3

如果你有这些变量和选择器：

@headings: h1,h2,h3,h4,h5,h6;

@{headings} {
    some-rule: rule;    
}
.headings { // this is a placeholder
    color: inherit;
}
h1 span {
    other-rule: rule;
}

你可以使用这个 mixin 来生成你想要的代码：

.mixin(@headings; @count) when (@count > 0) {
    .mixin(@headings; @count - 1);
    @heading: extract(@headings, @count);
    @{heading}{
        & a:extend(.headings) {}
        & a:extend(h1 span) when not (@heading = h1) {}
    }
}

调用：

.mixin(@headings, length(@headings));

将生成：

h1, h2, h3, h4, h5, h6 {
  some-rule: rule;
}
.headings,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}
h1 span,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  other-rule: rule;
}