extend 기능

@extend 사용 시 css 속성 집합을 상속받을 수 있다.

%flexSpace-Between {
	display : flex; 
	justify-content : space-between;
	align-items : center;
}

.items {
	@extend %flexSpace-Between
}

💡 mixin 과 extend 차이점

둘 다 코드의 집합을 넣어주는 방식이라 사용하는 데 있어 어디에 어떤 속성을 사용해야 옳은지 쉽지 않다.

간단하게,

extend

같은 경우 같은 버튼이지만 종류가 다른 버튼같이 연관된 개념을 확장(extend)해준다 생각하면 되며,

mixin

은 반대로 연관성이 없는 객체에 사용해 주면 된다.