네스팅이란 무엇일까? 우선 CSS를 예로 들어보겠습니다.
아래의 코드에서 보이듯이 CSS에서는 sub-items라는 클래스에 접근하기 위해서는 상위에 있는 모든 클래스를 작성해야합니다.
그렇기 때문에 코드에 중복이 많이 발생하고, 만약 .items클래스의 이름이 변경된다면 .items라는 이름이 쓰인 모든 클래스 선택자의 이름을 변경해야 합니다.
.items {}
.items .item {}
.items .item .title {}
.items .item .desc {}
하지만 SCSS는 Nesting을 통해 CSS의 이러한 문제점을 해결할 수 있습니다.
SCSS로 작성한 코드는 CSS의 문제점이었던 똑같은 코드의 중복작성을 줄이고, 클래스의 이름을 변경했을 때 모든 하위 클래스의 부모 클래스이름을 바꿔야 하는 문제를 해결해줍니다. 아래의 코드를 컴파일한다면 위의 CSS코드와 똑같은 코드로 컴파일되게 됩니다.
.items {
.item {
.title {}
.desc {}
}
}
만약 .items에서 가상선택자를 사용해야한다면 어떻게 해야될까요?
CSS에서는 아래의 코드처럼 사용해야될 겁니다.
.items .item .title:before {}
하지만 SCSS에서는 부모선택자&
를 사용해서 부모선택자를 참조할 수 있습니다.
.items {
.item {
.title {
&:before {}
}
.desc {}
}
}
속성이나 클래스명이 중복될 때에는 아래의 방법으로도 사용할 수 있습니다.
.items {
.item {
&-title {
margin: {
top: 5px;
bottom: 5px;
}
}
&-desc {
padding: {
left: 10px;
right: 10px;
}
}
}
}
위의 코드는 아래와 같은 CSS로 컴파일되게 됩니다.
.items .item-title {
margin-top: 5px;
margin-bottom: 5px;
}
.items .item-desc {
padding-left: 10px;
padding-right: 10px;
}
아주 특별한 경우에 네스팅에서 탈출하고 싶을 수도 있습니다.
이때는 @at-root
라는 키워드를 사용해 코드를 root로 보낼 수 있습니다.
.items {
.item {
$mg : 10px;
&-title {
margin: $mg;
}
}
.sub-item {
margin: $mg;
}
}
예제에서 $mg
는 변수입니다. 변수에 대해서는 다음 포스트에서 알아보겠습니다.
items안에는 item과 sub-item이 존재하고, item안에는 mg라는 변수가 선언되어 item-title의 margin으로 변수가 사용되고 있습니다. sub-item에서는 똑같이 margin으로 mg변수를 사용하려고 하지만 mg의 범위 밖에서 변수를 사용하려 하기 때문에 오류가 발생하게 됩니다. sub-item에서 mg변수를 사용해야한다면 @at-root
키워드를 사용하면됩니다.
.items {
.item {
$mg : 10px;
&-title {
margin: $mg;
}
@at-root .sub-item {
margin: $mg;
}
}
}
아래는 @at-root
를 사용해 컴파일된 CSS입니다.
.items .item-title {
margin: 10px;
}
.sub-item {
margin: 10px;
}
'프로그래밍 > SCSS' 카테고리의 다른 글
SCSS | 모듈화와 상속 (0) | 2023.02.03 |
---|---|
SCSS | 변수와 산술 연산자 (0) | 2023.02.02 |
SCSS란 무엇일까? (0) | 2023.02.01 |