참고: https://www.geeksforgeeks.org/include-vs-extend-in-sass/

요약

mixin을 쓰자.

mixin은 우리가 생각하던대로 각 컴포넌트에 mixin 내부의 프로퍼티들을 넣는다.

A {
	font-size: 12px;
	@include mix;
}
B {
	font-size: 2rem;
	@include mix;
}
---
A {
	font-size: 12px;
	color: blue
	font-weight: 600;
}
B {
	font-size: 2rem;
	color: blue
	font-weight: 600;
}

extend는 외부에 프로퍼티 블럭을 만든 후 그곳에 각 컴포넌트를 넣는다.

A {
	font-size: 12px;
	@extend %ex;
}
B {
	font-size: 2rem;
	@extend %ex;
}
---
A, B {
	color: blue
	font-weight: 600;
}
A {
	font-size: 12px;	
}
B {
	font-size: 2rem;
}

extend는 먼가 생각했던거랑은 다르게 만들어서 문제가 될 수도 있다.. (순서, 우선순위에 따라 달라지는 등)