responsive-breakpoints.html

<h1 class="test">Responsive: </h1>

responsive-breakpoints.scss

// Example use:
// @include respond(desktop) {
//   .example {
//     color: red;
//   }
// }
@mixin respond($breakpoint) {

  @if $breakpoint == mobile-only {
    @media screen and (max-width: 768px) and (orientation: portrait) {
      @content;
    }
  }

  @if $breakpoint == tablet-portrait {
    @media screen and (min-width: 768px) and (orientation: portrait) {
      @content;
    }
  }

  @if $breakpoint == tablet-landscape {
    @media screen and (min-width: 1024px) and (orientation: landscape) {
      @content;
    }
  }

  @if $breakpoint == desktop {
    @media screen and (min-width: 1260px) {
      @content;
    }
  }

  @if $breakpoint == desktop-hd {
    @media screen and (min-width: 1920px) {
      @content;
    }
  }
}


// Example Usage
.test {
  &::after {
    content: 'Mobile'
  }

  @include respond('tablet-portrait') {
    &::after {
      content: 'tablet-portrait'
    }
  }
  @include respond('tablet-landscape') {
    &::after {
      content: 'tablet-landscape'
    }
  }
  @include respond('desktop') {
    &::after {
      content: 'desktop'
    }
  }
  @include respond('desktop-hd') {
    &::after {
      content: 'desktop-hd'
    }
  }
}