관련 선택자를 중첩해 컴포넌트 규칙을 가까이 작성합니다.
CSS nesting은 전처리기 없이 선택자 안에 자식 규칙을 작성합니다. &는 바깥 선택자를 명시하며 &:hover, &.active처럼 상태를 연결할 때 유용합니다. 중첩이 너무 깊으면 생성되는 선택자를 읽기 어렵고 specificity도 커질 수 있습니다.
중첩된 세 규칙은 각각 .course-card h1, .course-card a, .course-card:hover로 풀려 적용됩니다. & 뒤에 공백이 있는 & h1과 & a는 카드 안의 후손을 고르고, 공백 없이 붙인 &:hover는 카드 자신의 상태라서 마우스를 올리면 카드 전체에 3px 연한 초록 외곽선이 생깁니다. 카드 밖에 있는 h1이나 링크에는 이 색이 퍼지지 않습니다.
&는 :is()처럼 동작해서, 바깥 선택자가 쉼표로 묶인 목록이면 중첩 규칙 전체가 그중 가장 높은 명시도를 갖습니다. 또 &를 뒤에 두어 .dark &처럼 쓰면 카드가 .dark 요소 안에 있을 때만 적용되는 규칙을 같은 블록 안에 적을 수 있습니다.
Sass 문법과 표준 CSS nesting이 항상 똑같다고 가정하지 말고 대상 브라우저 지원과 빌드 도구를 확인하세요.
직접 바꿔보세요focus-within 상태와 p 자식 규칙을 중첩해서 추가하세요.