[CSS] SCSS 02

@mixin / @include

속성들을 설정해 이름을 정해준 뒤 include를 통해 불러오기!

사진과 같이 mixin은 인자를 받을 수 있다!

자주 바뀌는 부분은 인자만 적어주고, 자주 바뀌지 않는 부분은 인자와 함께 기본값도 작성해주기! -> 따로 입력 안해도 기본값으로 출력됨!

mixin안에 @content를 넣어주면 mixin에 적혀있는 속성들 외에 추가적으로 기입해줄 수 있음!

@content는 대표적으로 미디어쿼리에서 유용하게 쓸 수 있다!!

나나님이 애용하신다는 mixin

@mixin blind {
	position : absolute;
	width : 1px;
	height : 1px;
	margin : -1px;
	padding : 0;
	overflow : hidden;
	border : 0;
	white-space : nowrap;
	clip :  rect(0,0,0,0);
}
@mixin ellipsis($lines: 1) {
	@if ($lines == 1) {
		overflow : hidden;
		text-overflow : ellipsis;
		white-space : nowrap;
	} @else {
		display : -webkit-box;
		overflow : hidden;
		text-overflow : ellipsis;
		-webkit-line-clamp : $lines;
		-webkit-box-orient : vertical;
	}
}

@extend(확장)

이미 있는 선택자를 @extend로 지정해 붙여주면 됨!

공통되는 스타일을 가진 선택자들끼리 묶여있다!!
추가 속성을 부여한 선택자들은 "확장"된 스타일을 가지고 있다!

extend는 기본 스타일 선언이 필요한데(.button {...}와 같은) 이 스타일은 컴파일이 된다.
컴파일시키지 않고 오로지 확장만을 위해서 쓰고 싶다면 % 기호를 사용하면 된다!
-> .button {...}가 생겼던 위 코드와 달리 .title {...}가 생기지 않음!

@mixin과 @extend의 차이

@mixin

• 인자를 넣을 수 있다
• 선택자 관리가 쉬워 전역으로 쓰기 편하다
• 컴파일된 css가 길어진다.

@extend

• 연관성있는 셀렉터들을 묶어 관리할 수 있다
• 미디어쿼리 등으로 셀렉터가 묶일 수 없다면 쓸 수 없다

mixin은 미리 정의한 속성을 복사해서 따로 적용한다면, extend는 선택자를 묶어서 한 번에 적용하므로!!
선택자끼리 의미론적 관계가 있다면 @extend를, 단순히 속성만 겹치는 관계라면 @mixin을 쓰는 것을 추천!

참고 : nana님 블로그