SCSS Media Query MIXIN (Desktop First)

데스크탑 퍼스트 반응형 작업에 유용한 미디어쿼리 믹스인을 간단히 정리했습니다.
필요에 따라 특정 영역만을 위한 분기가 추가되거나 브레이크 포인트가 변경될 수 있겠습니다. 모바일 퍼스트 버전은 필요하게 되면 다시 만드는 걸로..

//
// 미디어 쿼리 MIXIN
// --------------------------------------------------

// Break Point (Desktop First 기준 내림차순 설정)
$desktop-l-width	: 1440px;
$tablet-l-width		: 1024px;
$tablet-s-width		: 768px;
$mob-l-width		: 640px;
$mob-m-width		: 425px;
$mob-s-width		: 375px;

// only PC
@mixin pc-only {
	@media screen and (min-width: $tablet-l-width + 1) {
		@content;
	}
}
// PC large
@mixin pc-large {
	@media screen and (min-width: $desktop-l-width + 1) {
		@content;
	}
}

// --------------------------------------------------

// 태블릿
@mixin tab {
	@media screen and (max-width: $tablet-l-width) {
		@content;
	}
}
// 모바일
@mixin mob {
	@media screen and (max-width: $tablet-s-width - 1) {
		@content;
	}
}
// 모바일 large
@mixin mob-large {
	@media screen and (max-width: $mob-l-width) {
		@content;
	}
}
// 모바일 mid
@mixin mob-mid {
	@media screen and (max-width: $mob-m-width) {
		@content;
	}
}
// 모바일 small
@mixin mob-small {
	@media screen and (max-width: $mob-s-width) {
		@content;
	}
}

“SCSS Media Query MIXIN (Desktop First)”에 대한 2개의 생각

  1. 좋은 정보 감사합니다!! 위 코드를 활용해보려고 하는데요 15번째 줄에서 오류가 나네요. 연산식을 #{$tablet-l-width + 1} 로 수정하니 잘 작동되네요! 위에 코드도 문제 없는 코드인지 제가 잘못쓴건지 궁금하네요~

    1. 안녕하세요 반갑습니다.
      @mixin tab은 축소하다가 타블렛 사이즈에 진입했을 때를 구분하기 위한 것인데 문제없이 계산되고 있습니다.
      오히려 @mixin mob가 의도와 다르게 문제가 있어서 max-width: #{$tablet-s-width} – 1 으로 변경해놨습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.