[SCSS] 💎 중첩 기능 (Nesting)

Nesting (중첩)

Sass 의 매우 유용한 기능중 하나는 선언을 중첩시킬 수 있다는 것 입니다.

어떻게 작동하는지, 또 어떤점을 주의해야 할 지 알아봅시다.

​

일반 CSS 에선 특정 선택자 자식,자손의 선택자를 스타일링 하려면 이렇게 따로따로 하나하나씩 선언해서 해야 했습니다.

.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

간단한 CSS 면, 큰 문제는 없지만, CSS 파일이 커지면 유지보수가 어려워지죠.

​

Sass 에선, 이런식으로 중첩해서 작성하면 위와 같은 결과물을 얻을 수 있게 됩니다.

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

 

& (상위 선택자 참조)

부모 선택자를 리퍼런스 할떄는 & 문자를 사용합니다.

 

Sass

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

CSS

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}

 

 

& 키워드가 참조한 상위 선택자로 치환되는 것이기 때문에 다음과 같이 응용할 수도 있습니다.

 

Sass

.fs {
  &-small { font-size: 12px; } /* 이름을 새로 지정하는 방법 */
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

CSS

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

​

@at-root (중첩 벗어나기)

중첩에서 벗어나고 싶을 때 @at-root 키워드를 사용합니다.
중첩 안에서 생성하되 중첩 밖에서 사용해야 경우에 유용합니다.

 

Sass

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w; /* box는 밖에서 사용해야하지만, 변수사용으로 인해 하는수 없이 중첩했다. 그리고 @at-root를 통해서 빠져나온다 */
    height: $h;
  }
}

CSS

.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

---

Reference

https://heropy.blog/2018/01/31/sass/