Permalink
82 lines (74 sloc) 1.63 KB
// 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;
}
}
}