3. 중첩 (Nesting)

기존 CSS에서는 HTML의 계층 구조를 표현하기 위해 선택자를 매번 처음부터 길게 반복해서 적어야 했습니다.

SCSS의 Nesting(중첩)을 사용하면 HTML과 동일한 시각적 계층 구조로 CSS를 작성할 수 있습니다. 상위 선택자 안에 하위 선택자를 포함시켜 가독성을 크게 높이고 타이핑 양을 줄여줍니다. 부모 선택자를 가리키는 & 기호와 결합하면 더욱 강력해집니다.

HTML 구조와 똑같이 만든답시고 4~5단계 이상 깊게 중첩하게 되면, 컴파일된 CSS의 구체성(Specificity)이 너무 높아져 스타일을 덮어쓰기 매우 힘들어집니다. 중첩은 가급적 3단계를 넘지 않도록 작성하는 것이 모범 사례입니다.

<nav class="navigation">
  <ul class="nav-list">
    <li class="nav-item"><a href="#">홈</a></li>
    <li class="nav-item"><a href="#">소개</a></li>
    <li class="nav-item active"><a href="#">서비스</a></li>
  </ul>
</nav>

/* SCSS 중첩 구조 예시 (컴파일된 CSS) */
/*
.navigation {
  background: #333;
  padding: 1rem;
  
  .nav-list {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0; padding: 0;
  }
  
  .nav-item {
    a {
      color: white;
      text-decoration: none;
      
      &:hover {
        color: #61dafb; // & 기호는 부모(a)를 그대로 치환함
      }
    }
    
    &.active a {
      font-weight: bold;
      color: #61dafb;
    }
  }
}
*/

/* 컴파일된 실제 CSS */
.navigation {
  background: #333;
  padding: 1rem;
}
.navigation .nav-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation .nav-item a {
  color: white;
  text-decoration: none;
}
.navigation .nav-item a:hover {
  color: #61dafb;
}
.navigation .nav-item.active a {
  font-weight: bold;
  color: #61dafb;
}