SCSS 반응형웹 medeiquery mixin 만들기

variable.scss

: 각 대응할 분기점 설정

// media

$mobileSize : 320px;

$tabletSize : 768px;

$pcSize : 1100px;

 

 

mixin.scss

// mediaquery

@mixin respond-to($media) {

  @if $media == mobile { // mobile

    @media only screen and (max-width: $tabletSize - 1) { @content; }

  }

  @else if $media == tablet { // tablet

    @media only screen and (min-width: $tabletSize) and (max-width: $pcSize - 1) { @content; }

  }

  @else if $media == pc { // pc

    @media only screen and (min-width: $pcSize) { @content; }

  }

  @else if $media == mt { // mobile~tablet

      @media only screen and (max-width: $pcSize - 1) { @content; }

  }

  @else if $media == tp { // tablet~pc

      @media only screen and (min-width: $tabletSize) { @content; }

  }

}

 

 

사용

mainSide 클래스의 font-size가 pc일때 20, mobile 부터 tablet까지 15일 경우

.mainSide {
    @include respond-to(pc) {
        font-size:20px;
    }
    @include respond-to(mt) {
        font-size:15px;
    }
}