Sass 및 결합 된 자식 선택기

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

참고URL : https://stackoverflow.com/questions/7345763/sass-and-combined-child-selector