canarymason/breakpoint — pull request #1 by Snugug (2012-05-24 19:36:28+00:00)
Title: Updated min/max, DX improvement to feature/value

Updated the min/max functionality to be able to be used with any valid value, not just min-width. Also added in handling for prefixing device-pixel-ratio media query. Also added ability for single feature/value pairs to be written with feature first or second. Finally, converted from Sass to SCSS.

```scss
.foo {
@include breakpoint(300px 400px) {
content: 'foo';
}
}

.bar {
@include breakpoint(300px 400px 'height') {
content: 'bar';
}
}

.baz {
@include breakpoint(1 1.5 'device-pixel-ratio') {
content: 'baz';
}
}
```
Becomes

```css
@media screen and (min-width: 300px) and (max-width: 400px) {
.foo {
content: 'foo';
}
}

@media screen and (min-height: 300px) and (max-height: 400px) {
.bar {
content: 'bar';
}
}

@media screen and (-webkit-min-device-pixel-ratio: 1) and (-webkit-max-device-pixel-ratio: 1.5) {
.baz {
content: 'baz';
}
}

@media screen and (min--moz-device-pixel-ratio: 1) and (max--moz-device-pixel-ratio: 1.5) {
.baz {
content: 'baz';
}
}

@media screen and (-o-min-device-pixel-ratio: 1/1) and (-o-max-device-pixel-ratio: 3/2) {
.baz {
content: 'baz';
}
}
```

TODO: Need to be able to write min/max in either order, but that can be written off to API constraints.