Drop custom "wider-than" mixin for Neat's "media" mixin.

[gregrickaby]

Neat's media mixin supports: variables, min-width, max-width, etc... basically any media query can be passed through.

By default, @include media() uses min-width so:

This would be the normal WDS workflow

Sass

.foo {
    @include media($tablet-landscape) {
         color: $color-black;
    }
}

CSS

@media screen and (min-width: 64rem) {
    .foo {
       color: #000;
    }
}

Plain 'ol pixels

Sass

.foo {
    @include media(768px) {
         color: $color-black;
    }
}

CSS

@media screen and (min-width: 768px) {
    .foo {
       color: #000;
    }
}

Use max-width

Sass

.foo {
    @include media(max-width 768px) {
       color: $color-black;
    }
}

CSS

@media screen and (max-width: 768px) {
    .foo {
       color: #000;
    }
}

Combine both min and max widths using variables

Sass

.foo {
    @include media(min-width $phone-portrait max-width $phone-landscape) {
       color: $color-black;
    }
}

CSS

@media screen and (min-width: 22.5rem) and (max-width: 40rem) {
    .foo {
       color: #000;
    }
}

See it in action here: http://neat.bourbon.io/examples/

[aubreypwd]

+1 Also would fix #117 as the sizes would be a variable.

[colorful-tones]

+1

[efuller]

+1 on this!

[coreymcollins]

FO. SHO. Let's do iiiiitttt

[bezierer]

+1 here!