Sass 和组合子选择器

2022-01-10 00:00:00 css-selectors css sass

我刚刚发现了 Sass，对此我感到非常兴奋.

I've just discovered Sass, and I've been so excited about it.

在我的网站中，我实现了一个树状导航菜单，使用 子组合子 (E > F).

In my website I implement a tree-like navigation menu, styled using the child combinator (E > F).

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

Is there any way to rewrite this code with a simpler (or better) syntax in Sass?

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

推荐答案

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

Without the combined child selector you would probably do something similar to this:

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

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

If you want to reproduce the same syntax with >, you could to this:

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

编译成这样:

foo > bar > baz {
  color: red;
}

<小时>

或者在 sass 中:

Or in sass:

foo
  > bar
    > baz
      color: red

相关文章