[펌글] SASS 에서 미디어쿼리(media query)를 사용하여 기기(디바이스, device) 분기 처리(반응형, responsive)하는 샘플 코드

참고

• 원본 출처 - [SCSS(SASS)] 반응형 breakpoints 추가하는 방법
• 원본이 scss로 되어 있어서 sass로 변환해 봄
• sass로 map 선언시, 개행하면 문법오류가 나서 map-merge를 사용했으나 별로 좋아보이지 않는다. sass의 한계인지?

샘플 소스

/////////////////////////////// 반응형 환경변수 정의 (S) ///////////////////////////////
$breakpoints:                         ('mobile-extra-small': (min-width:  21.25rem)) // 340
$breakpoints: map-merge($breakpoints, ('mobile-portrait-only': (max-width:  29.9375rem))) // 479
$breakpoints: map-merge($breakpoints, ('mobile-landscape': (max-width:  51rem))) // 816
$breakpoints: map-merge($breakpoints, ('tablet-portrait': (min-width: 48rem))) // 768
$breakpoints: map-merge($breakpoints, ('desktop-template': (min-width: 48.0625rem))) // 769
$breakpoints: map-merge($breakpoints, ('tablet-portrait-only': (max-width: 48rem))) // 768
$breakpoints: map-merge($breakpoints, ('tablet-big': (min-width: 60.625rem))) // 970
$breakpoints: map-merge($breakpoints, ('desktop': (min-width: 64rem))) // 1024
$breakpoints: map-merge($breakpoints, ('desktop-medium': (min-width: 75rem))) // 1200
$breakpoints: map-merge($breakpoints, ('desktop-large': (min-width: 90rem))) // 1440
$breakpoints: map-merge($breakpoints, ('desktop-extra-large': (min-width: 120rem))) // 1920

@mixin respond-to($name)
    @if map-has-key($breakpoints, $name)
        @media only all and #{inspect(map-get($breakpoints, $name))} 
            @content
    @else
        @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map."
/////////////////////////////// 반응형 환경변수 정의 (E) ///////////////////////////////

// 적용 샘플
// @include를 이렇게 밖에서 써도 되고, 클래스정의 안에서 써도 되는 것 같다.
@include respond-to('desktop')       
    .initHeight
        min-height: 1000px //