21장. CSS Nesting

Native nesting은 전처리기 없이 관련 selector를 가까이 쓴다. 부모 selector가 필요한 위치, compound selector, pseudo-class 문법을 정확히 구분한다.

.task {
  border: 1px solid var(--line);
  &:hover { border-color: var(--blue); }
  & > header { display:flex; }
}

nesting 깊이가 DOM 깊이를 따라가면 coupling과 specificity가 커진다. 두 단계 내를 기본으로 하고 component state와 direct child 정도에 쓴다. Sass 문법과 native 문법이 항상 같다고 가정하지 않는다.