CSS를 선택자의 구조가 복잡해지는 경우가 아주 많다.
예를 들어 태그가 많이 중첩되어 3중 4중이 되었을 때 div > ul > li...이렇게 계속 써주는 방법도 좋지만 가독성이 좋지 않다.
이 문제를 보완하기 위해 CSS도 HTML처럼 중첩해서 사용할 수 있는 기능이 SCSS에 있다.
훨씬 직관적이고 명확하며 가독성이 좋다는 장점이 있다.
SCSS 중첩 사용법
li {
&:hover {
background-color: lightgray;
}
color: $color-blue;
font-weight: $font-thin;
font-size: $font-small;
p {
color: black;
}
section {
color: blue;
}
article {
color: pink;
h3 {
color: green;
}
}
h2 {
color: blueviolet;
}
}보기와 같이 li태그안에 p, section, article, h3, :hover 태그가 중첩되어있는 것을 알 수 있다.
이렇게 중첩하여 사용하면 매번 li > p와 같이 li를 반복해서 쓰지 않아도 된다.
& 기호를 붙여 스스로를 선택해서 :hover나 :active 속성을 사용할 수도 있다.
중첩 사용 시 장단점
장점:
- 가독성 향상: 스타일이 계층 구조로 정리되어 코드가 직관적이다.
- 코드 간결화: 반복적인 선택자 정의를 줄여 코드가 간결해진다.
- 유지보수 용이: 관련 스타일이 함께 묶여 있어 관리하기 쉽다.
단점:
- 과도한 중첩: 중첩이 깊어질수록 코드가 복잡해지고, 유지보수가 어려워질 수 있다.
- 높은 구체성: 중첩이 깊어질수록 CSS의 구체성이 높아져 의도치 않은 스타일 충돌이 발생할 수 있다.
- 퍼포먼스 저하: 지나치게 복잡한 중첩은 브라우저가 스타일을 해석하는 데 부담이 될 수 있다.
hyohyo