중첩

프로그래밍/SCSS

SCSS | 네스팅과 참조연산자

네스팅이란 무엇일까? 우선 CSS를 예로 들어보겠습니다. 아래의 코드에서 보이듯이 CSS에서는 sub-items라는 클래스에 접근하기 위해서는 상위에 있는 모든 클래스를 작성해야합니다. 그렇기 때문에 코드에 중복이 많이 발생하고, 만약 .items클래스의 이름이 변경된다면 .items라는 이름이 쓰인 모든 클래스 선택자의 이름을 변경해야 합니다. .items {} .items .item {} .items .item .title {} .items .item .desc {} 하지만 SCSS는 Nesting을 통해 CSS의 이러한 문제점을 해결할 수 있습니다. SCSS로 작성한 코드는 CSS의 문제점이었던 똑같은 코드의 중복작성을 줄이고, 클래스의 이름을 변경했을 때 모든 하위 클래스의 부모 클래스이름을 바꿔..

MAJG
'중첩' 태그의 글 목록