media query in [Sass/SCSS]

mixin을 통한 responsive web

먼저 각 환경에 대한 breakpoint를 변수로 선언한 파일을 생성해줍니다.

_variable.scss

// Breakpoint

$xs: 0,
$sm: 480px,
$md: 720px,
$lg: 960px,
$xl: 1200px

파일명 앞에 _를 붙인 이유는 파일단위로 구분하여 컴파일이 되지않기 때문입니다.

_mixin.scss

@import "./variables";

@mixin xs {
	@media (min-width: #{$xs}) and (max-width: #{$sm - 1px}) {
    	@content;
    }
}

@mixin sm {
	@media (min-width: #{$sm}) and (max-width: #{$md - 1px}) {
    	@content;
    }
}

@mixin md {
	@media (min-width: #{$md}) and (max-width: #{$lg - 1px}) {
    	@content;
    }
}

@mixin lg {
	@media (min-width: #{$lg}) and (max-width: #{$xl - 1px}) {
    	@content;
    }
}

@mixin xl {
	@media (min-width: #{$xl}) {
    	@content;
    }
}

main.scss

@include xs {
	.img {
    	width: 100px;
    }
}

@include sm {
	.img {
    	width: 200px;
    }
}
...

다음과 같이 미디어 쿼리를 적용할 수 있습니다.