LESS의 미디어 쿼리

요소에 미디어 쿼리를 추가하는 함수를 만들어 봅시다. 예를 들어, 모바일 장치에 대한 스타일을 조절하는 쿼리로 해보겠습니다. 함수 이름도 그에 맞게 지어봅시다:

.mobile(@code) {

}

우리 함수는 매개변수로 코드 블록을 받을 것입니다. 이 블록을 미디어 쿼리 내부에 출력해 봅시다:

.mobile(@code) {
	@media (max-width: 600px) {
		@code();
	}
}

이제 우리 함수를 사용해 봅시다:

div {
	.mobile({
		width: 300px;
	});
}

결과적으로 컴파일 후 우리의 div는 미디어 쿼리 내부에 위치하게 되어 해당 스타일을 적용받게 됩니다:

@media (max-width: 600px) {
	div {
		width: 300px;
	}
}

태블릿용 스타일을 지정하는 tablet 함수를 만드세요.

모바일과 태블릿용 스타일을 지정하는 gadget 함수를 만드세요.

노트북용 스타일을 지정하는 notebook 함수를 만드세요.

데스크톱용 스타일을 지정하는 desktop 함수를 만드세요.