Responsiveness SASS mixins

readme.md

Breakpoint breakdown

Usage

.my-container {
  font-size: 18px;
  @include support(phone) {
    font-size: 12px;
  }
  @include support(tablet-portrait) {
    font-size: 16px;
  }
  @include support(big-desktop) {
    font-size: 24px;
  }
}

_responsive.scss

@mixin support($size) {
  @if $size == phone {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop {
    @media (min-width: 1800px) { @content; }
  }
}