Mixins for Breakpoint, SASS.

_breakpoint-mixins.scss

@mixin only-for-mobile {
  @media (max-width: 576px) {
    @content;
  }
}

@mixin mobile-and-above {
  @media (min-width: 576px) {
    @content;
  }
}

@mixin only-for-tablet {
  @media (min-width: 576px) and (max-width: 768px) {
    @content;
  }
}
@mixin tablet-and-above {
  @media (min-width: 768px) {
    @content;
  }
}
@mixin tablet-and-below {
  @media (max-width: 768px) {
    @content;
  }
}

@mixin only-for-laptop {
  @media (min-width: 768px) and (max-width: 992px) {
    @content;
  }
}

@mixin laptop-and-above {
  @media (min-width: 992px) {
    @content;
  }
}

@mixin laptop-and-below {
  @media (max-width: 992px) {
    @content;
  }
}

@mixin only-for-large-devices {
  @media (min-width: 992px) and (max-width: 1200px) {
    @content;
  }
}

@mixin large-devices-and-above {
  @media (min-width: 1200px) {
    @content;
  }
}

@mixin large-devices-and-below {
  @media (max-width: 1200px) {
    @content;
  }
}