Sass và bộ chọn con kết hợp

Tôi mới phát hiện ra Sass và tôi đã rất hào hứng với nó.

Trong trang web của tôi, tôi thực hiện một menu điều hướng giống như cây, được tạo kiểu bằng cách sử dụng bộ kết hợp con ( E > F).

Có cách nào để viết lại mã này với cú pháp đơn giản hơn (hoặc tốt hơn) trong Sass không?

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

Nếu không có bộ chọn con kết hợp, có thể bạn sẽ làm một cái gì đó tương tự như sau:

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

Nếu bạn muốn sao chép cùng một cú pháp với >, bạn có thể làm điều này:

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

Điều này biên dịch cho điều này:

foo > bar > baz {
  color: red;
}

Hoặc trong sass:

foo
  > bar
    > baz
      color: red

Đối với quy tắc duy nhất mà bạn có, không có cách nào ngắn hơn để thực hiện. Bộ kết hợp con giống nhau trong CSS và trong Sass / SCSS và không có sự thay thế nào cho nó.

Tuy nhiên, nếu bạn có nhiều quy tắc như thế này:

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

Bạn có thể ngưng tụ chúng theo một trong những điều sau đây:

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