_conditionals.scss

// Media query helpers. These make producing IE layouts
// super easy.

// The base css you write should be for mobile. You can
// then add desktop styles on top.
//
// Usage:
//
//   div.columns {
//     border: 1px solid;
//
//     @include media(desktop){
//       width: 30%;
//       float: left;
//     }
//     @include ie-lte(8) {
//       something to fix visual bugs in old IE
//     }
//     @include ie(6) {
//       padding: 0;
//     }
//   }


$is-ie: false !default;
$mobile-ie6: true !default;

$tablet-breakpoint: 641px !default;
$desktop-breakpoint: 769px !default;

@mixin media($size: false, $max-width: false, $min-width: false, $ignore-for-ie: false) {
  @if $is-ie and ($ignore-for-ie == false) {
    @if $size != mobile {
      @if ($ie-version == 6 and $mobile-ie6 == false) or $ie-version > 6 {
        @content;
      }
    }
  } @else {
    @if $size == desktop {
      @media (min-width: $desktop-breakpoint){
        @content;
      }
    } @else if $size == tablet {
      @media (min-width: $tablet-breakpoint){
        @content;
      }
    } @else if $size == mobile {
      @media (max-width: $tablet-breakpoint - 1px){
        @content;
      }
    } @else if $max-width != false {
      @media (max-width: $max-width){
        @content;
      }
    } @else if $min-width != false {
      @media (min-width: $min-width){
        @content;
      }
    } @else {
      @media (min-width: $size){
        @content
      }
    }
  }
}

@mixin ie-lte($version) {
  @if $is-ie {
    @if $ie-version <= $version {
      @content;
    }
  }
}

@mixin ie($version) {
  @if $is-ie {
    @if $ie-version == $version {
      @content;
    }
  }
}