Breakpoint mixin breakpoints

breakpoint

// Breakpoint mixin breakpoints
$breakpoint-small: 768px;
$breakpoint-medium: 1004px;
$breakpoint-large: 1230px;

// Responsive helpers
@mixin breakpoint($point) {
  @if $point == wide {
    @media (min-width: $breakpoint-large) { @content; }
  }
  @else if $point == landscape {
    @media (min-width: $breakpoint-medium) { @content; }
  }
  @else if $point == portrait {
    @media (min-width: $breakpoint-small)  { @content; }
  }
}

// Example
.class {
  margin-right: 0;
  @include breakpoint(portrait) {
    margin-right: em(48);
  }
  @include breakpoint(landscape) {
    margin-right: em(170);
  }
}