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

使用规则集

如果您将标题组定义为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 2

<强>＃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 ... {}定义时输出到CSS，而不是.headings定义，因此如果定义的话，它可能会破坏您的级联覆盖你有一些）。

<强>＃2 alt。解决方案我从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 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;
}

多个嵌套选择器，其中的变量为Less

3 个答案:

使用规则集