[SCSS] 미디어쿼리 사용하기(믹스인, 조건문 조합한 반응형)

기본 미디어쿼리 사용

.top-bar{
    .con {
        max-width:1200px;
        background:lightcoral;

        @media(1150px >= width > 750px) {
            max-width:900px;
            background: lightblue; 
        }

        @media(750px >= width) {
            max-width:500px;
            background: lightgreen; 
        }
    }
}

• 이 방법은 css가 길어질 수록 코드가 반복될 수 있다.

 

믹스인, 조건문 조합한 반응형 작업

@mixin response-con($breakpoint){
    @if $breakpoint == medium {
        @media(1150px >= width > 750px){
            @content;
        }
    }
    @else if $breakpoint == small {
        @media(750px >= width){
            @content;
        }
    }
}

.top-bar{
    .con {
        max-width:1200px;
        background:lightcoral;
        
        @include response-con(medium){
            max-width:900px; 
            background: lightblue; 
        } 

        @include response-con(small){
            max-width:500px;
            background: lightgreen;  
        }
    }
}