SASS(SCSS) Nesting 기능과 사용법

Nesting은 중첩이라는 뜻입니다.

SASS에서 부모선택자를 기준으로 자식 선택자를 사용하여 하나의 스타일 규칙을 다른 규칙 안에 중첩하는 기능을 말합니다.

즉 Nesting을 사용하면 부모 선택자의 반복을 피하고 자식(=후손) 셀렉터를 간단하게 작성할수 있습니다.

 

Nesting을 사용하는 이유는 다음과 같습니다.

css셀렉터는 많이 사용하다보면 소스가 복잡해지는데,그러다 보면 어떤 요소를 꾸미는지 제대로 파악하기 어렵게 됩니다.

예시) div.container h1.headTitle > span > a:hover

이때 중첩을 이용하면 가독성과 유지관리가 쉬워집니다.

 

 

nesting 문법

다음 코드는 css로 작성했을 때와 scss로 작성했을 때입니다. 

scss는 셀렉터 대신에 nesting을 이용하여 코딩합니다. 코드는 다르지만 같은 기능을 하는 코드입니다.

css의 경우 container class를 상속해야 하기때문에 매번 반복 작성을 해야하지만 sass문법을 적용하면 container class를 한 번만 작성하면 됩니다. 편리하쥬?

/* CSS 문법 */
.container h1 {font-sie: 16px;}
.container p {font-size: 12px;color: #666;}
.container p a {text-decoration: underline}


/* sass(scss) 문법 */
.container {
    h1 {
    	font-size: 16px;
    }
    p {
    	font-size: 12px;
        color: #666;
        a {
            text-decoration: underline;
        }
    }
}

 

상위(부모) 선택자 참조 &

부모 선택자를 참조할 때는 &를 사용합니다. 예를 들면 a:hover이런거나 div::before 이런 선택자를 사용할때  많이 쓰입니다.

 

/* scss - 상위 선택자 참조 */
.list-button {
    &:hover {
    	font-weight: bold;
        color: green;
    }
    &:first-child {
    	display: block;
    }
    [data-name=items] & {
    	font-size: 18px;
        margin-right: 8px;
    }
    :not(&) {
        background: #fff;
    }
}


/* css - Compiled to */
.list-button:hover {
    font-weight: bold;
    color: green;
}
.list-button:first-child {
    display: block;
}
[data-name=items] .list-button {
    font-size: 18px;
    margin-right: 8px;
}
:not(.list-button) {
    background: #fff;
}

 

&는 상위 선택자로 치환이 되므로 다음과 같이 응용하여 쓰기도 합니다.

/* scss */
.icon {
    &-red {background: red;}
    &-green {background: green;}
    &-black {background: black;}
}


/* css - Compiled to */
.icon-red {background: red;}
.icon-green {background: green;}
.icon-black {background: black;}

 

중첩된 속성

속성중에 margin-으로 시작하는 margin-top, margin-bototm, margin-left, margin-right와 같은 속성이 있습니다. 

padding-, font-, background-과 같이 동일한 네임 스페이스를 가지는 속성은 다음과 같이 간단히 표현할수 있습니다.

/* scss */
.item {
    font: {
        weight: bold;
        size: 16px;
        color: #333;
    }
    padding: {
        top: 20px;
        left: 10px;
        right: 10px;
        bottom: 20px;
    }
}


/* css - Compiled to */
.item {
    font-weight: bold;
    font-size: 16px;
    font-color: #333;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
}

 

 

 

중첩 나가기 @at-root

중첩 밖에서 사용해야할 경우 @at-root를 사용하면 중첩에서 탈출할 수 있습니다.

.card-img의 경우 컴파일되면 .img-list .card-img {...} 이런식으로 되는데 @at-root를 사용하면 .card-img {...}  이렇게 결과값이 나옵니다. 

/* scss */
.img-list {
    $w: 300px;
    $h: 200px;
    img {
        width: $w;
        height: $h;
    }
    @at-root .card-img {
    	width: $w;
        height: $h;
    }
}


/* css - Compiled to */
.img-list img {
    width: 300px;
    height: 200px;
}
.card-img {
    width: 300px;
    height: 200px;
}

 

---

 

nesting의 장점

sass에서 nesting을 사용하면 조직적이고 가독성이라는 두가지 이점이 있습니다.

sass스타일의 중첩된 특성은 어떤 스타일이 어떤 html요소에 해당하는지 쉽게 정렬할수 있으며 쉽게 파악이 가능하고 디버깅 및 공동 작업에 용이합니다.

 

nesting의 단점

너무 많이 중첩을 이용하면 문제가 생길 수 있습니다. 중첩을 너무 깊게 사용하는 것은 시각화하기 어렵습니다.