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

或者在sass中:

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