Enhancement: Reduce bloat in output

[ghost]

Great mixin! It could introduce some sort of intelligence to reduce bloat in output.

The following example (with the default setup)

div {
  display: none;

  @include media(">=phone", "<tablet") {
    display: block;
  }
}

produces

div {
  display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
  div {
    display: block;
  }
}

whereas phone is the first device in $breakpoints and more importantly with the smallest value on the range, and could as effectively be output as

div {
  display: none;
}
@media (max-width: 767px) {
  div {
    display: block;
  }
}

The same principle can be applied at the upper end of the range.

EDIT: To further explain the benefit: it doesn't make sense applying a media query to smallest and largest denominators. We're not capping our styles with (max-width: 8000px), why would we limit them to (min-width: 320px).

[eduardoboucas]

Thanks, I'm glad you like the mixin.

Not sure if I understand what you're suggesting though. If you are actively including the phone breakpoint in your arguments, wouldn't you expect it to be part of the final expression?

If you want to generate this:

div {
  display: none;
}
@media (max-width: 767px) {
  div {
    display: block;
  }
}

You can simply use:

div {
  display: none;

  @include media("<tablet") {
    display: block;
  }
}

I understand where you're trying to get when you say that it doesn't make sense to include the smallest and largest denominators in the media query, but it might make sense for some people/extreme cases perhaps.
Also, I would consider this essential if you had no way to generate that optimized code you're after, but you do. Just omit the conditions in your mixin call.

Does this make sense or am I missing something?

Thanks!