2021.11.25 Today I Learned

지난시간 SASS, SCSS에 대한 간략한 소개와 기본적인 구조 및 Nesting(중첩)에 대해 알아보았다. 오늘은 이어서 좀 더 구체적이고 자세한 이야기를 해보려한다.

우선 Nesting의 주의할 점에 대해 좀 더 자세히 짚고 넘어가야하는데 Nesting이 부모요소를 반복적으로 부르지 않아도 된다는 장점이 있지만, 너무 무분별하게 중첩시킬 경우 오히려 구분하기 힘들어지거나 혹은 불필요한 선택자가 사용될 수 있기 때문에 삼가해야한다.

속성 Nesting

Nesting을 이용하여 속성 역시 중첩 할 수 있는데, 아래의 background속성을 이용하여 예시를 들어보겠다.

div{
    width: 100px;
    height: 100px;
    background : {
        color: black;
    }
}

scss파일에서 background-color: black;을 하는게 아닌 background: { } 하여 중괄호 안에 color:black;을 담은 모습을 볼수있는데 이것을 컴파일 하면

div {
  width: 100px;
  height: 100px;
  background-color: black;
}
/*# sourceMappingURL=style.css.map */

위와 같이 background-color: black;으로 변환하여 저장되는것을 볼 수 있다. 물론 위의 예시는 background-color: black;하는 것이 더 빠르고 바람직한 모습일 순 있으나 예를들어 background-image를 통하여 이미지파일을 가져오고 center를 잡아주고 no-repeat 하여 중복을 잡아주어야 하는경우 문장이 더욱 길어질 수 있기에 사용해주면 좋다.

ampersand Nesting

ampersand Nesting은 ampersand(= &)를 사용하는데 &는 자신의 부모를 가르킨다.

button{
    &:focus{
        color: red;
    }
    &:hover{
        color: blue;
    }
    &::after{
        content: '';
    }
    &::before{
        content: '';
    }
}

이런식으로 버튼 안에 &를 이용하여 부모를 가리키면

button:focus {
  color: red;
}

button:hover {
  color: blue;
}

button::after {
  content: '';
}

button::before {
  content: '';
}
/*# sourceMappingURL=style.css.map */

이런식으로 컴파일 되는것을 볼 수 있다. 또한, class명에 앞부분이 같은 공동class의 경우 이를 응용할 수 있는데, 만약 내가 div를 3개 만들었고 각 클래스 명을 box-one, box-two, box-three라고 선언하였을 경우

.box{
    &-one{
        color: red;
    }
    &-two{
        color: orange;
    }
    &-three{
        color: yellow;
    }
}

하여 컴파일 시키면

.box-one {
  color: red;
}

.box-two {
  color: orange;
}

.box-three {
  color: yellow;
}
/*# sourceMappingURL=style.css.map */

이런식으로 .box가 앞에 나란히 붙어 공동 class로서 자리매김한것을 볼 수 있다.

@at-root

내가 scss를 작성하던 도중 중첩에서 따로 취급하고싶은 선택자가 있을경우 @at-root를 사용한다. 짧은 scss일 경우 그냥 따로 빼주면 되지만, 문장이 길어지고 줄이 많아질수록 어디서 어느중괄호에서 빼내야 따로 선언이 되는지 해깔리는 경우가 있다. 이때 사용해주면 좋다고 생각한다.

예를 들어 위의 box class 선언에 있어 내가 four라는 클래스를 따로 중첩에서 빼내어 사용하고 싶으면

.box{
    &-one{
        color: red;
    }
    &-two{
        color: orange;
    }
    &-three{
        color: yellow;
    }
    width: 10px;
    height: 10px;
    @at-root .four{
        width: 5px;
        height: 5px;
        color: green;
    }
}

이런식으로 도중에 @at-root를 사용하여 따로 선언해준다. 그러면 css파일에선

.box {
  width: 10px;
  height: 10px;
}

.box-one {
  color: red;
}

.box-two {
  color: orange;
}

.box-three {
  color: yellow;
}

.four {
  width: 5px;
  height: 5px;
  color: green;
}
/*# sourceMappingURL=style.css.map */

이런식으로 four class만 중첩에서 나와 따로 선언된것을 볼 수 있다.

이렇게 Nesting에 대해 좀 더 깊게 알아보았다. 더 많고 더 심화적이게 사용할 수 있지만 그것은 이 이후에 따로 다뤄보려고 한다.