@hagenburger I'm trying to accommodate for that style too by using -up, -only and -below. This should let you control how the media query properties affect larger and smaller displays. That way you can have styles that target mobile phones specifically or avoid them completely.

gotcha. i'll take four; widescreen (including retina), default, "tablet portrait" and iphone.
btw if you've time can i ask you sth? foundation fw from zurb, has some cool classes like "hide on tablet" and "show on phone"; any thoughts on how they did that?

@hagenburger You're right & I know that. What I've done is clearly not finished. I'm not happy with this names.
I've plan to add shortcut more verbose.
But as I said before, we have to design for screen sizes, not for devices.

I've to add more examples on how to use these media queries in a concret showcase.

We are still designing for screen sizes, it's just using semantics that are easier for people to understand. 'phone' is extra small, 'tablet' is small, 'desktop' is medium and so forth. If we're basically aiming for those devices we might as well use names we can remember :)

But there's definitely some parts that I'll borrow from yours. Might want to check and see if that compiles though. I know in the current version of sass you can't do variables in media queries. That might be fixed up now though.

Are you still using this? I just implemented it and love it so far. Just curious if you still use it in your work flow. The only drawback I found is it generates a ton of excess media queries once compiled. But I found a Grunt plugin to combine them so its ok.

Here is my take on a media query mixin. There's less hardcoding involved and it supports as many screen sizes as you wish because it utilizes maps and functions. It's not that better than this gist, but is DRYer.