SASS 를 이용해서 미디어 쿼리를 체계적으로 작성하기

이 글은 아래의 영상의 내용을 기반으로 작성되었습니다.

www.youtube.com/watch?v=KWrGRZaBdgs

 

 

방법에는 총 두가지가 있습니다.

1. Break Point Mixin 생성

이 방법은 사용하는 것이 더 간단하지만 성능은 더 좋지 않습니다.

// mixin 생성
@mixin breakpoint($size) { 
    @if $size == mobile { 
    	@media screen and (min-width: 360px) { @content; } 
    } 
    @else if $size == tablet { 
    	@media screen and (min-width: 768px) { @content; } 
    }
    @else if $size == laptop { 
    	@media screen and (min-width: 1224px) { @content; } 
    }
    @else if $size == desktop { 
    	@media screen and (min-width: 1824px) { @content; } 
    }
} 

// 아래와 같이 어디서나 적용 
@include breakpoint(mobile) { ... }

 

2. —device 라는 이름의 mixin 들을 생성 후 media query 에 include 해서 적용

이 방법은 사용하는 방법이 복잡하고 귀찮은 점도 좀 있지만 css 로 트랜스파일된 결과물 파일에 여러번의 미디어 쿼리가 사용되지 않으므로 더 좋은 성능을 낼 수 있습니다.

 

// 미디어 쿼리 모음에 각 mixin 을 include 해서 적용 
@media screen and (min-width: 360px) { 
	@include mobile-header(); 
} 
@media screen and (min-width: 768px) { 
	@include tablet-header(); 
} 
@media screen and (min-width: 1224px) { 
	@include laptop-header(); 
} 
@media screen and (min-width: 1824px) { 
	@include desktop-header(); 
}

 

// components 폴더 생성 후 그 안에 기본 scss 와 미디어 쿼리에 넣을 mixin 의 내용 작성

.logo { ... } 

@mixin desktop-logo() { 
	.logo { ... } 
}