LearnBoost/stylus — Issue #521: Feature Suggestion: Drastically improved media queries
Author: ianstormtaylor
Created: 2012-01-13 21:50:00+00:00
State: open

Here's how it works now:

```
#main
max-width: 1000px
margin: 0 auto
padding: 0 .25em // Increases with display size.
transition: padding .5s

// 480+
@media (min-width: 480px)
#main
padding: 0 .5em

// 760+
@media (min-width: 760px)
#main
padding: 0 1em

// 830+
@media (min-width: 830px)
#main
padding: 0 2em

// 930+
@media (min-width: 930px)
#main
padding: 0 4em
```

If stylus was smart about nested media queries it could look like this:

```
#main
max-width: 1000px
margin: 0 auto
padding: 0 .25em // Increases with display size.
transition: padding .5s

// 480+
@media (min-width: 480px)
padding: 0 .5em

// 760+
@media (min-width: 760px)
padding: 0 1em

// 830+
@media (min-width: 830px)
padding: 0 2em

// 930+
@media screen and (min-width: 930px)
padding: 0 4em
```

Then all your media queries would always be able to be right next to the selector you're adding them to, even if it has a bunch of nested rules underneath it.

Bonus points, if it got even smarter:

```
#main
max-width: 1000px
margin: 0 auto
padding: 0 .25em // Increases with display size.
transition: padding .5s

@media 480px+
padding: 0 .5em

@media 760px+
padding: 0 1em

@media 830px+
padding: 0 2em

@media 930px+
padding: 0 4em
```

You could do things like `@media 480px-720px`, which is way more readable. (This makes the call that any ranges are `width` rules and not `device-width` rules.)

And then there's the Aliasing Blocks (#410) that I mentioned which would be better probably, and more flexible:

```
#main
max-width: 1000px
margin: 0 auto
padding: 0 .25em // Increases with display size.
transition: padding .5s

@480px+
padding: 0 .5em

@760px+
padding: 0 1em

@830px+
padding: 0 2em

@930px+
padding: 0 4em
```
(That snippet assumes I've defined them elsewhere.)