1) Nesting

Nesting 이란 중첩을 의미합니다.

SCSS 에서는 상위 선택자 밑에 하위 선택자를 넣어서 트리 구조를 형성할 수 있습니다.

다음과 같은 html 구조와 SCSS 코드를 작성해보겠습니다.

<div class="box">
    <a href="#">박스입니다.</a>
</div>

.box {
  width: 300px;
  height: 300px;
  background-color: #42b883;
  display: grid;
  place-items: center;

  a {
    color: white;
    font-size: 40px;
  }
}

위 SCSS 는 아래와 같이 컴파일됩니다.

.box {
  width: 300px;
  height: 300px;
  background-color: #42b883;
  display: grid;
  place-items: center; 
}

.box a {
  color: white;
  font-size: 40px;
}

box 클래스 선택자 밑에 a 태그 선택자를 넣었더니

CSS 에서는 부모 선택자가 자식 선택자가 붙은 상태로 컴파일되었습니다.

결과 화면