css - 创建具有多个类的 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