Sass和组合儿童选择器

Question

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

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

是否有任何方法可以将重写为这段代码转换为Sass上更简单（或更好）的语法？

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

Answer 1

没有合并子选择，你可能会做一些类似的：如果你想重现相同的语法与>

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

，你可以这样：

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

编译为：

foo > bar > baz { 
    color: red; 
} 

---

还是以青菜：

foo 
    > bar 
    > baz 
     color: red 

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