CSS

scss 미디어 쿼리 v2

728x90
반응형

// map holding breakpoint values

$breakpoints: ( mobile : 0px, tablet : 680px, desktop: 960px );

 

// mixin to print out media queries (based on map keys passed)

@mixin media($keys...){

  @each $key in $keys {

    @media (min-width: map-get($breakpoints, $key)){

        @content

     }

  }

}

 

.section-ptb {

   padding-top: 130px;

   padding-bottom: 130px;

 

   // pass the key(s) of the media queries you want to print

 

   @include media(mobile, tablet, desktop){

      padding-top: 80px;

      padding-bottom: 80px;

   }

}

728x90
반응형