TIL | Sass - mixins vs @extend(inheritance)

mixins와 @extend의 compile 결과 차이

mixins

각 속성 설정을 @include한 선택자 내에 추가한다.

단점 - 같은 설정이 @include 할 때마다 중복되어 결과물의 크기가 커진다.

@extend(inheritance)

@extend한 선택자들을 모아서 그룹화하고, 속성 설정을 적용한다.

단점 - 관련 없는 선택자들이 그룹화된다.

https://medium.com/stories-from-the-keen/when-to-use-extends-vs-mixins-in-sass-b09d55abd53

When to use — extends vs mixins in SASS

mixins와 @extend를 언제 사용해야 하는가

동적으로 속성 정의가 바뀐다면 => mixins

정적으로 정해져 있어도 의미적으로 연관된 rule/selector가 아니라면 => mixins

이외의 경우 => @extend

 

@extend을 사용하면 연관되지 않은 선택자들이 그룹화 되어 순서가 엉키고, specificity(명시도)가 꼬일 수 있다.

또한, 성능도 mixins가 더 좋다.

https://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/

When to use @extend; when to use a mixin – CSS Wizardry – Web Performance Optimisation

https://csswizardry.com/2016/02/mixins-better-for-performance/

Mixins Better for Performance – CSS Wizardry – Web Performance Optimisation