Breakpoints

_extenders.scss

// Breakpoints
@mixin bp($point) {
  @if $point == wide {
    @media (max-width: $bp-wide) { @content; }
  }
  @else if $point == full {
    @media (max-width: $bp-full) { @content; }
  }
  @else if $point == landscape {
    @media (max-width: $bp-landscape) { @content; }
  }
  @else if $point == portrait {
    @media (max-width: $bp-portrait) { @content; }
  }
  @else if $point == mobile {
    @media (max-width: $bp-mobile)  { @content; }
  }
  @else if $point == smmobile {
    @media (max-width: $bp-smmobile)  { @content; }
  }
}

_varaibles.scss

// Layout widths
$bp-wide: 1400px;
$bp-full: 1200px;
$bp-landscape: 1024px;
$bp-portrait: 768px;
$bp-mobile: 660px;
$bp-smmobile: 480px;
$container-width: 1000px;
$max-width: 1440px;