Responsive helper mixins

_responsive-mixins.scss

// =============================================
// Breakpoints
// =============================================

$breakpoint-extra-small: 435px;
$breakpoint-small: 770px;
$breakpoint-large: 992px;

@mixin breakpoint($feature, $value) {
    @media only screen and ($feature: $value) {
        @content;
    }
}


// =============================================
// Easier Responsive Mixins
// =============================================


@mixin breakpoint-extra-small() {
  //specific overrides for tiny screens
  @include breakpoint(max-width, $breakpoint-extra-small) {
    @content
  }
}

@mixin breakpoint-small() {
  //0px –– 759px
  @include breakpoint(max-width, $breakpoint-small - 1) {
    @content
  }
}

@mixin breakpoint-medium() {
  //760px –– 992px
  @media only screen and (min-width:$breakpoint-small) and (max-width: $breakpoint-large) {
    @content
  }
}

@mixin breakpoint-large() {
  //993px –– ∞
  @include breakpoint(min-width, $breakpoint-large + 1) {
    @content
  }
}

@mixin breakpoint-medium-or-larger() {
  @include breakpoint(min-width, $breakpoint-small) {
    @content
  }
}

@mixin breakpoint-medium-or-smaller() {
  @include breakpoint(max-width, $breakpoint-large) {
    @content
  }
}