관련 선택자를 중첩해 컴포넌트 규칙을 가까이 작성합니다.
CSS nesting은 전처리기 없이 선택자 안에 자식 규칙을 작성합니다. &는 바깥 선택자를 명시하며 &:hover, &.active처럼 상태를 연결할 때 유용합니다. 중첩이 너무 깊으면 생성되는 선택자를 읽기 어렵고 specificity도 커질 수 있습니다.
이번 예제의 출발점은 .card { & h2 { ... } &:hover { ... } }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 focus-within 상태와 p 자식 규칙을 중첩해서 추가하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
Sass 문법과 표준 CSS nesting이 항상 똑같다고 가정하지 말고 대상 브라우저 지원과 빌드 도구를 확인하세요.
직접 바꿔보세요focus-within 상태와 p 자식 규칙을 중첩해서 추가하세요.