scss SCSS Breakpoints Mixin

Posted 2021-05-17

/*********************
Breakpoints
*********************/
/* usage: @include bp(tablet) { // your styles here } */
 @mixin bp($point) {
  @if $point == widescreen { // 1440px
     @media (min-width: 90em) { @content ; }
  }
  @elseif $point == tv { // 1300px
     @media (min-width: 81.25em) { @content ; }
  }
   @else if $point == desktop { // 1184px
     @media (min-width: 74em) { @content ; }
  }
   @else if $point == laptop { // 1024px
     @media (min-width: 64em) { @content ; }
  }
    @else if $point == tablet { // 800px
     @media (min-width: 50em) { @content ; }
  }
   @else if $point == phablet { // 600px
     @media (min-width: 37.5em)  { @content ; }
  }
  @else if $point == mobileonly { // 400px
     @media (max-width: 25em)  { @content ; }
  }
  @else if $point == print {
     @media (print)  { @content ; }
  }
}