scss breakpoint mixins

breakpoint-mixins.scss

$screen-xs-min: 425px;  // Tiny phones
$screen-sm-min: 576px;  // Small tablets and large smartphones (landscape view)
$screen-md-min: 768px;  // Small tablets (portrait view)
$screen-lg-min: 992px;  // Tablets and small desktops
$screen-xl-min: 1200px; // Large tablets and desktops

// Mixins

// Tiny devices
@mixin xs {
  @media (min-width: #{$screen-xs-min}) {
    @content;
  } 
} 
@mixin sm { @media (min-width: #{$screen-sm-min}) {@content;} } // Small devices
@mixin md { @media (min-width: #{$screen-md-min}) {@content;} } // Medium devices
@mixin lg { @media (min-width: #{$screen-lg-min}) {@content;} } // Large devices
@mixin xl { @media (min-width: #{$screen-xl-min}) {@content;} } // Extra large devices


$mobile-width: 480px;
$tablet-width: 768px;
$desktop-width: 1024px;
@mixin mobile {
  @media (min-width: 320px) and (max-width: #{$mobile-width}) {
    @content;
  }
}

@mixin mobile-landscape {
  @media only screen and (min-width: 320px) and (max-width: #{$mobile-width}) and (orientation: landscape) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}