네스팅

🔗https://developer.mozilla.org/ko/docs/Web/CSS/CSS_nesting CSS에서도 scss 처럼 중첩선택자를 사용할수 있다. & 2023년도에 추가 되었으며 사용방법은 scss와 같다 다른점이 있다면 전처리기의 사용없이 브라우저에서 바로 해석이 가능하므로 더욱 편리하다는 점이다.

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

위와 같이 작성하면 & 은 parentRule 문자열을 그대로 받아온다

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

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

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

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

위와 같이 오렌지색으로 표시된 것과 같이 사용할수도 있다.

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

여러번 사용가능

html

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

css

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

이 코드는 웹브라우저에서 바로 해석이 된다 조금 있으면 scss의 map 과 for 도 나오겠지? 신난다 재미난다 🫣