[SASS/SCSS] @extend

 

@extend

- 거의 똑같은 css클래스가 있을 경우 예외처리를 위해 또하나의 클래스를 만드는 대신 @extend기능을 사용

- 새로운 스타일을 생성

- 클래스 간에 스타일을 공유

 

 

<div class="cafe">
  <p>여기는 아메리카노가 좋습니다.</p>
</div>
<br>
<div class="cafe-two">
  <p>여기는 케이크가 좋습니다.</p>
</div>

.cafe{
  background-color: green;
  border: 1px solid green;
  padding: 6px;
  border-radius: 8px;
  p{
    color: #ffffff;
  }
}

.cafe-two{
  @extend .cafe;
  background-color: red;
  border: 1px solid red;
}

@extend .cafe의 스타일 정보를 그대로 사용하면서

.cafe-two에서의 색상을 변경

---

| 플레이스홀더 선택자 사용 (%)

- 다른 스타일을 확장시키려는 목적이라면 클래스(.) 대신 %를 붙여준다.

ex) Button

<button class="btn-cancel">취소</button>
<button class="btn-ok">확인</button>
<button class="btn-save">저장</button>

%button{
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid gray;
}

.btn-cancel{
  @extend %button;
  color: gray;
}

.btn-ok{
  @extend %button;
  color: blue;
}
.btn-save{
  @extend %button;
  color: green;
}

모든 버튼은 %button 를 참조한다.

---

@extend | @mixin 의 차이

- 믹스인을 과하게사용할 경우 css파일이 장황해진다.

- 전반에 걸쳐 반복적으로 사용하면 믹스인보단 extend를 쓰거나 반복되는 스타일을 클래스로 변환하여 마크업 재사용 권장

- extend를 많이 사용하면 선언이 거대해진다.