ff0000/red-sass — pull request #1 by timrwood (2014-03-06 00:02:34+00:00)
Title: Add media query mixins

This adds two types of mixins: generic viewport width and height mixins, and targeted device width mixins.

#### Generic width and height mixins

```scss
@include width-over($w) {}
@include width-under($w) {}
@include width-between($a, $b) {}
@include height-over($h) {}
@include height-under($h) {}
@include height-between($a, $b) {}
```

These are shorthands for `@media only screen and (min-width: $a) and (max-width: $b)` and the like.

Examples:

```scss
body {
@include width-under(400px) { color: red; }
@include width-over(600px) { color: white; }
@include width-between(400px, 600px) { color: black; }
}
// Output
@media only screen and (max-width: 400px) {
body { color: red; }
}
@media only screen and (min-width: 600px) {
body { color: white; }
}
@media only screen and (min-width: 400px) and (max-width: 600px) {
body { color: black; }
}
```

#### Targeted mixins

These use the general mixins above, but with predefined values.

```scss
@include phone {} // width under 320px
@include phone-and-tablet {} // width under 768px
@include tablet-and-phone {} // width under 768px
@include tablet {} // width between 321px and 768px
@include tablet-and-desktop {} // width over 321px
@include desktop-and-tablet {} // width over 321px
@include desktop {} // width over 769px
```

These map to the following breakpoints.

```
0 320 768 ∞
| phone | tablet | desktop |
| | | |
| phone-and-tablet | |
| tablet-and-phone | |
| | | |
| | tablet-and-desktop |
| | desktop-and-tablet |
0 320 768 ∞
```

The targeted mixins are definitely more opinionated, so please add a comment if you have other ideas.