使用多个类创建 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;
}

我想在每种情况下生成一个 "double class" 选择器，而不仅仅是第一个。为此，我尝试使用一种有效的迭代方法，但我一点也不满意：

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

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

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

.general
  {pages}
    a
      color black

甚至自动与 replace bif:

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

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

Create Stylus variable with several classes and concatenate in compilation