13. 네스팅

parentRule {
  /* 부모 규칙 스타일 속성 */
  & childRule {
    /* 자식 규칙 스타일 속성 */
  }
}

.card {
  /* .card 스타일 */
  .featured & {
    /* .featured .card 스타일 */
  }
}

/* 브라우저는 위 중첩 규칙을 다음과 같이 파싱합니다. */

.card {
  /* .card 스타일 */
}

.featured .card {
  /* .featured .card 스타일 */
}

.card {
  /* .card 스타일 */
  .featured & & & {
    /* .featured .card .card .card 스타일 */
  }
}

<p class="example">
  이 문단은 <a href="#">링크</a>를 포함합니다. 호버하거나 포커스를 맞춰보세요.
</p>

.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

.example {
  font-family: system-ui;
  font-size: 1.2rem;

  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}