확장 - Extend, 추천하지않는 이유

1. 확장(Extend)

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

@extend 선택자;

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

.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}

CSS에서 .btn, .btn-danger이렇게 "," 콤마를 볼 수 있다. 이것은 다중선택자이고 2개의 클래스 모두 똑같은 스타일을 적용한다는 뜻이다. 그리고 background: red로 값을 재정의 해서 배경색상만 다르게 스타일을 적용한것을 볼 수 있다.

 

 

2. 추천하지않는이유

컴파일된 결과가 마음에 들지 않을것이다.
결과를 보면 ,로 구분하는 다중 선택자(Multiple Selector)가 만들어졌다.

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

• 내 현재 선택자(위 예제의 .btn-danger)가 어디에 첨부될 것인가?
• 원치 않는 부작용이 초래될 수도 있는가?
• 이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가? -->선택자가 이동되어서 확장되는것이기 때문에 굉장히 길어질 수 있다.

.container{
    width: 300px;
    height: 300px;
    background: red;
    
    .item{
        width: 200px;
        height: 200px;
        background: blue;
        .icon{
            width: 100px;
            height: 100px;
            background: green;
        }
    }
}

.wrapper{
    .new-icon{
        @extend .icon;
    }
}

.container {
  width: 300px;
  height: 300px;
  background: red;
}
.container .item {
  width: 200px;
  height: 200px;
  background: blue;
}
.container .item .icon, .container .item .wrapper .new-icon, .wrapper .container .item .new-icon {
  width: 100px;
  height: 100px;
  background: green;
}

결과적으로 확장(Extend) 기능은 무해하거나 혹은 유익할 수도 있지만 그만큼 부작용을 가지고 있을 수 있다.

.container .item .icon까지는 문제가 없었지만 조상요소인 뒤에 있는부분들은 굉장히 길어지면서 내가 원치 않는 소스코드의 형태로 나와있는것을 볼 수 있다.
따라서 확장은 사용을 권장하지 않으며, 위에서 살펴본 Mixin을 대체 기능으로 사용해보기.

 

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