创建具有多个类的Stylus变量并在编译中连接

Question

我遇到的情况是我想为几个选择器分配相同的CSS规则，通常我会使用Stylus interpolation为变量分配几个类。

pages = '.home, .about, .contact'

{pages}
    a
        color black

这产生于：

.home a, .about a, .contact a {
    color: black;
}

但我有一个问题，如果有可能，我想以优雅的方式解决。现在假设我想使用相同的变量与另一个变量连接，例如：

.general
    &{pages}
        a
            background-color black

以预期的方式产生：

.general.home a, .general .about a, .general .contact a {
    background-color: black;
}

我想在每种情况下生成一个“双类”选择器，而不仅仅是第一个。为此我尝试使用一种有效的迭代方法，但我完全不满意：

pages = home about contact

.general
    for class in pages
        &.{class}
            a
                color black

这产生于：

.general.home a { color: black; }
.general.about a { color: black; }
.general.contact a { color: black; }

这不是太糟糕，但是当我想以第一种方式使用相同的变量时（这是我给这个变量最常用的），我不能，因为它没有使用正确的选择器语法进行编译

你能想出任何方法来实现这个目标吗？

提前致谢！

Answer 1

您可以将&添加到选择器字符串中的每个类：

pages = '&.home, &.about, &.contact'

.general
  {pages}
    a
      color black

甚至自动使用replace bif：

pages = '.home, .about, .contact'

.general
  {replace('\.', '&.', pages)}
    a
      color black