[Sass/SCSS] 확장(Extend) - @extend


Sass(SCSS) 확장(Extend) - @extend


  • 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있습니다.
  • 이럴 경우 선택자의 확장 기능을 사용할 수 있습니다.


@extend

@extend 선택자;
  • SCSS:
.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}

.btn-danger {
  @extend .btn;
  background: red;
}  
  • Compiled to:
.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}

.btn-danger {
  background: red;
}
  • 컴파일된 결과가 마음에 드시나요?
  • 결과를 보면 ,로 구분하는 다중 선택자(Multiple Selector)가 만들어졌습니다.

  • 사실 @extend는 다음과 같은 문제를 고려해야 합니다.

    • 내 현재 선택자(위 예제의 .btn-danger)가 어디에 첨부될 것인가?
    • 원치 않는 부작용이 초래될 수도 있는가?
    • 이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가?
  • 결과적으로 확장(Extend) 기능은 무해하거나 혹은 유익할 수도 있지만 그만큼 부작용을 가지고 있을 수 있습니다. 따라서 확장은 사용을 권장하지 않으며, 위에서 살펴본 Mixin을 대체 기능으로 사용하세요.

  • 사용을 권장하지 않는 이유에 대해서 좀 더 자세한 정보를 원하면 Sass Guidelines Extend를 참고하세요.



    본 포스팅은 HEROPY 님의 영상과 블로그를 보고 공부한 내용을 정리한 것입니다.
    https://heropy.blog/2018/01/31/sass/