Sass 和组合子选择器

我刚刚发现了 Sass 我一直很兴奋。

在我的网站，我实现了一个树状导航菜单，样式使用子组合程序(E > F)。

有没有办法用 Sass 语法中更简单(或更好)的重写代码？

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

160376 次浏览

小开

最佳答案

如果没有组合的子选择器，你可能会做类似的事情:

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

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

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

结果是这样的:

foo > bar > baz {
color: red;
}

或者顶嘴:

foo
> bar
> baz
color: red

小开

对于你所拥有的单一规则，没有任何更短的方法可以做到这一点。子组合器在 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; }
}