Sass and combined child selector

Question

방금 ​​Sass를 발견했으며, 그것에 대해 너무나 흥분했습니다.

덧붙여서, 내 웹 사이트에서는, 겸용 자식 셀렉터 (E > F)을 사용해 스타일링 된 트리 형 네비게이션 메뉴를 구현하고 있습니다.

이 코드를 Sass에서 더 간단하거나 더 나은 구문으로 다시 작성할 수 있습니까? 이것에 당신이 >과 같은 구문을 재현하려면

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

, 당신은 할 수 : 당신은 아마 이와 비슷한 일을 할 것입니다 결합 된 아이 선택기없이

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

Answer 1

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

다음에 컴파일됩니다.

foo > bar > baz { 
    color: red; 
} 

---

또는 말대꾸 10 : 당신이 그 하나의 규칙에 대한

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