JordanHatch/maslow-redux

// Retina Images mixin

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

// Return ems from a pixel value

@function em($px,$base:16) {
  @return ($px / $base) + em;
}

// Set font size in rems with a pixel fallback

@mixin font-size($font-size, $base:16) {
  font-size: $font-size +px;
  font-size: $font-size / $base +rem;
}

@mixin respond-to($media) {
  @if $media == mobile {
    @media only screen and (max-width: 640px) { @content }
  }
  @else if $media == tablet {
    @media only screen and (max-width: 1200px) { @content }
  }
}