SCSS 반응형으로 사용하기, 재사용하기 @mixin/@media/@content/@include

@mixin/@media/@content

@content가 포함되어 있다면 해당 부분에 css속성 추가 가능

//Breakpoints
$breakpoint-desktop-large: 1370px;
$breakpoint-desktop-small: 1024px;
$breakpoint-tablet: 768px;
$breakpoint-mobile: 414px;

//responsive
@mixin desktop-large {
    @media (max-width: $breakpoint-desktop-large) {
        @content;
    }
}
@mixin desktop-small {
    @media (max-width: $breakpoint-desktop-small) {
        @content;
    }
}
@mixin tablet {
    @media (max-width: $breakpoint-tablet) {
        @content;
    }
}
@mixin mobile {
    @media (max-width: $breakpoint-mobile) {
        @content;
    }
}

---

기본 header style

//START HD : header
.hd_wrap{ position: fixed; width: 100%; left: 0; top: 0; right: 0; z-index: 1000;
    .top_bar{  border-bottom: 1px solid #eeeeee; width: 100%; height: 4rem;  background-color: $color-white;}
    .login_menu{ float: right;
        a{ color: $color-gray; position: relative; padding: 0 1.5rem; font-size: $fs-smaller; line-height: 4rem;}
        .split{ position: absolute; width: 1px; height: 13px; top:2px; right:0; background-color:#eee;}
    }
    .gnb_bar{ width: 100%; height: 8rem; background-color: $color-white;
        .content_wrap{ display: flex; justify-content: space-between; align-items: center;}
        .logo{ display: block; font-size: 0;}
        .gnb_menu{ width: 70%;
            .gnb_ul { display: table; table-layout: fixed; width: 100%; line-height: 8rem;}
            .gnb_li { display: table-cell; margin: 3rem 3.5rem; text-align: center;
                a{ color: $color-black; font-size : $fs-big;}
            }
            .closeBtn{display: none;}
        }
        .ham_btn{display: none;}
    }
}
//END HD : header

---

@include

@include desktop-large{ 
    //mobile style...
}
@include desktop-small{ 
    //mobile style...
}
@include tablet{
    //mobile style...
}
@include mobile{
    //mobile style...
}