萨斯和组合的孩子select

我刚刚发现了Sass，而且我对此非常兴奋。

顺便说一下，在我的网站上，我实现了一个树形导航菜单，使用组合的子select器 （ E > F ）进行样式化。

有什么方法可以将这些代码重写为Sass上更简单（或更好）的语法？

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

Answer 1

没有组合的子select器，你可能会做类似这样的事情：

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

如果你想用>来重现相同的语法，你可以这样做：

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

这编译到这个：

 foo > bar > baz { color: red; } 

---

或者在sass：

 foo > bar > baz color: red 

Answer 2

对于你的单一规则，没有任何简单的方法来做到这一点。 子组合器在CSS和Sass / SCSS中是一样的，除此之外别无select。

但是，如果你有这样的多个规则：

 #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; } }