Sass 和组合子选择器

Question

我刚刚了解了Sass，非常兴奋。

在我的网站中，我使用子级组合器(E > F)来实现树状导航菜单的样式。

有没有一种更简单（或更好）的Sass语法可以重写这段代码？

#foo > ul > li > ul > li > a {
  color: red;
}

- frarees

---

我认为“更简单/更好”的OP的意思是“以使用空格来表示层次结构的方式”。 - jsejcksn

Answer 1

如果没有合并的子选择器，你可能会做类似于这样的事情：

foo {
  bar {
    baz {
      color: red;
    }
  }
}

如果你想使用>来复制相同的语法，你可以这样做：

foo {
  > bar {
    > baz {
      color: red;
    }
  }
}

这段代码编译后会得到以下结果：

foo > bar > baz {
  color: red;
}

---

或者在 Sass 中：

foo
  > bar
    > baz
      color: red

- Arnaud Le Blanc

---

这只会让它变得更长，不是吗？ - BoltClock

我认为这就是原帖作者想要的。 - Arnaud Le Blanc

不错，谢谢。顺便说一句，正如BoltClock所说，这种方式更长（对我来说有点丑）。看来我得继续使用我的旧样式了。 - frarees

你需要定义“更优雅的语法” ;) - Arnaud Le Blanc

Answer 2

对于你所拥有的这个单独规则，没有更短的方法来实现。子元素选择器在CSS和Sass/SCSS中是相同的，也没有其他替代方法。

然而，如果你有多个类似于这样的规则:

#foo > ul > li > ul > li > a:nth-child(3n+1) {
    color: red;
}

#foo > ul > li > ul > li > a:nth-child(3n+2) {
    color: green;
}

#foo > ul > li > ul > li > a:nth-child(3n+3) {
    color: blue;
}

你可以将它们压缩为以下其中一个：

/* Sass */
#foo > ul > li > ul > li
    > a:nth-child(3n+1)
        color: red
    > a:nth-child(3n+2)
        color: green
    > a:nth-child(3n+3)
        color: blue

/* SCSS */
#foo > ul > li > ul > li {
    > a:nth-child(3n+1) { color: red; }
    > a:nth-child(3n+2) { color: green; }
    > a:nth-child(3n+3) { color: blue; }
}

- BoltClock

---

所以没有针对组合子选择器的转换...也许有任何替代方法吗？ - frarees