[SCSS] @mixin VS @extend

💡 미리보는 결론
가급적 @mixin을 사용해라.


Why?
무분별한 @extend 사용 시 연관성 없는 값들이 한 장소에 묶이게 되고,
소스 순서가 어그러져서 혼란을 준다.


참고: https://mytory.net/2016/12/23/when-to-use-extend-when-to-use-a-mixin.html

@mixin

---

• 연관성 없는 선택자의 중복 제거
• 함수처럼 인수 사용가능
  
  

선언

@mixin style-link-text($col) {
  text-decoration: none;
  text-transform: uppercase;
  color: $col;
}

호출

• @include 입력 후 사용

$color-text-white: #fff;

.btn-main {
  @include style-link-text($color-text-white);
}
.btn-hot {
  @include style-link-text($color-text-white);
}

CSS 컴파일 결과

• 연관성 없는 선택자들이 따로 선언된다.

.btn-main {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}
.btn-hot {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}

@extend

---

• 연관성 있는 선택자의 중복 제거

선언

• %를 입력하고 바로 뒤에 이름을 선언

%btn-placeholder {
  padding: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 100px;
  width: 100px;
  @include style-link-text($color-text-white);
}

호출

• @extend 입력 후 사용

.btn-main {
  &:link {
    @extend %btn-placeholder;
  }
}

.btn-hot {
  &:link {
    @extend %btn-placeholder;
  }
}

CSS 컴파일 결과

• 연관성 있는 선택자들이 같이 선언된다.

.btn-main:link,
.btn-hot:link {
  padding: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 100px;
  width: 100px;
  @include style-link-text($color-text-white);
}