[TIL] 10.08 sass include media 와 exclude 순서

컴포넌트 css 작업 중에 중복 사용되는 css를  %를 사용하여 선언을 해주었고 반응형 값이 들어가야했기에 아래와 같이 선언 해주었다. 

%font {
	font-size: 14px;
	font-weight: 600;

	@include media(">640px") {
		font-size: 16px;
		font-weight: 700;
	}
}

 

그리고 exclude 를 통하여 위의 값을 가져와서 실행을 하니 에러가 발생 하였다. 저런 형식으론 사용 할 수 없다는 에러였다.

 

%font-small {
	font-size: 14px;
	font-weight: 600;
}

%font-medium {
	font-size: 16px;
	font-weight: 700;
}

그래서 위와 같이 설정을 바꿔주고 폰트의 반응형이 필요한 곳에 media 함수를 적용하고 그 함수에 extends 를 사용하여 불러와 주었다.