Sass Responsive Named Mixins

NamedMixins

// Variables defined in _variables.scss

// Usage @include breakpoint(medium) { width: XXX }
@mixin breakpoint($point) {
  @if $point == massive {
    @media (min-width: $massiveViewportWidth) { @content; }
  }
  @else if $point == xxl {
    @media (min-width: $xxlargeViewportWidth) { @content; }
  }
  @else if $point == xl {
    @media (min-width: $xlargeViewportWidth)  { @content; }
  }
  @else if $point == large {
    @media (min-width: $largeViewportWidth)  { @content; }
  }
  @else if $point == medium {
    @media (min-width: $mediumViewportWidth)  { @content; }
  }
  @else if $point == small {
    @media (min-width: $smallViewportWidth)  { @content; }
  }
  @else if $point == mini {
    @media (max-width: $miniViewportWidth)  { @content; }
  }
}


// Usage @include between(mediumLarge) { width: XXX }
@mixin between($points) {
  @if $points == largeXlarge {
    @media (min-width: $largeViewportWidth) and (max-width: $xlargeViewportWidth - 1)  { @content; }
  }
  @else if $points == mediumLarge {
    @media (min-width: $mediumViewportWidth) and (max-width: $largeViewportWidth - 1)  { @content; }
  }
  @else if $points == smallMedium {
    @media (min-width: $miniViewportWidth) and (max-width: $mediumViewportWidth - 1)  { @content; }
  }
}