04 네스팅

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

1
parentRule {
2
  /* 부모 규칙 스타일 속성 */
3
  & childRule {
4
    /* 자식 규칙 스타일 속성 */
5
  }
6
}

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

1
.card {
2
  /* .card 스타일 */
3
  .featured & {
4
    /* .featured .card 스타일 */
5
  }
6
}
7

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

10
.card {
11
  /* .card 스타일 */
12
}
13

14
.featured .card {
15
  /* .featured .card 스타일 */
16
}

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

1
.card {
2
  /* .card 스타일 */
3
  .featured & & & {
4
    /* .featured .card .card .card 스타일 */
5
  }
6
}

여러번 사용가능

html

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

css

1
.example {
2
  font-family: system-ui;
3
  font-size: 1.2rem;
4
}
5

6
.example > a {
7
  color: tomato;
8
}
9

10
.example > a:hover,
11
.example > a:focus {
12
  color: ivory;
13
  background-color: tomato;
14
}

위의 코드를 아래처럼 수정할수 있다.

1
.example {
2
  font-family: system-ui;
3
  font-size: 1.2rem;
4

5
  & > a {
6
    color: tomato;
7
    &:hover,
8
    &:focus {
9
      color: ivory;
10
      background-color: tomato;
11
    }
12
  }
13
}

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