Sass 및 결합 된 자식 선택기

나는 방금 Sass를 발견했고 그것에 대해 너무 흥분했습니다.

내 웹 사이트에서는 자식 결합 자 ( E > F)를 사용하여 스타일이 지정된 트리와 같은 탐색 메뉴를 구현합니다 .

Sass에서 더 간단한 (또는 더 나은) 구문으로이 코드 를 다시 작성할 수 있는 방법 이 있습니까?

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

결합 된 자식 선택기가 없으면 다음과 비슷한 작업을 수행 할 수 있습니다.

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

를 사용하여 동일한 구문을 재현하려면 >다음을 수행 할 수 있습니다.

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

이것은 다음과 같이 컴파일됩니다.

foo > bar > baz {
  color: red;
}

또는 sass에서 :

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