I got the idea from the Trello CSS guide.
Why do it like this?
Here are some real world examples of where it helped me. Note: The comments in the code were actually there and not added now.
Simple query.
Before:
// Tablet only
@media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
After:
@media @tablet {
Combining queries.
Before:
@media (min-width: @screen-sm-min) {
After:
@media @tablet, @desktop {
Why not have a @tablet-and-up
or @not-mobile
? I tried it, but it didn't expose these situations as good as having to write @tablet, @desktop
:
Before:
@media (min-width: @screen-sm-min) {
...
}
// Tablet only
@media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
...
}
After #1:
@media @tablet-and-up {
...
}
@media @tablet {
...
}
After #2 (I prefer it like this):
@media @tablet, @desktop {
...
}
@media @tablet {
...
}
Inconsistent and incorrect combinations of min-width:
and max-width:
properties with screen-xx-min
and screen-xx-max
values.
This:
@media (min-width: @screen-sm-max) {
Should be:
@media (min-width: @screen-md-min) {
Which is solved by this:
@media @desktop {