Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Media Queries in Sass
// Media Queries in Sass 3.2
//
// These mixins make media queries a breeze with Sass.
// The media queries from mobile up until desktop all
// trigger at different points along the way
//
// And important point to remember is that and width
// over the portrait width is considered to be part of the
// landscape width. This allows us to capture widths of devices
// that might not fit the dimensions exactly. This means the break
// points are seamless.
$mq-mobile-portrait : 320px !default;
$mq-mobile-landscape : 480px !default;
$mq-tablet-portrait : 768px !default;
$mq-tablet-landscape : 1024px !default;
$mq-desktop : 1382px !default;
// Both portrait and landscape
@mixin mobile-only {
@media (max-width : $mq-mobile-landscape) {
@content;
}
}
// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
@mixin mobile-portrait-only {
@media (max-width : $mq-mobile-portrait) {
@content;
}
}
// Everything up to and including the mobile portrait
@mixin mobile-portrait-and-below {
@media (max-width : $mq-mobile-portrait) {
@content;
}
}
// Everything above and including the mobile portrait
@mixin mobile-portrait-and-up {
@media (min-width : $mq-mobile-portrait) {
@content;
}
}
// Everthing larger than a portrait mobile up until mobile landscape
@mixin mobile-landscape-only {
@media only screen and (min-width : $mq-mobile-portrait + 1) and (max-width : $mq-mobile-landscape) {
@content;
}
}
// Everything up to and including the mobile landscape width
@mixin mobile-landscape-and-below {
@media only screen and (max-width : $mq-mobile-landscape) {
@content;
}
}
// Everything above and including the mobile landscape width
@mixin mobile-landscape-and-up {
@media only screen and (min-width : $mq-mobile-portrait + 1) {
@content;
}
}
// Both the portrait and landscape width of the tablet
// Larger than a landscape mobile but less than or equal to a landscape tablet
@mixin tablet-only {
@media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-landscape) {
@content;
}
}
// Everything larger than mobile landscape up until the portrait width of the tablet
@mixin tablet-portrait-only {
@media only screen and (min-width : $mq-mobile-landscape + 1) and (max-width : $mq-tablet-portrait) {
@content;
}
}
// Everything below and including the portrait width of the tablet
@mixin tablet-portrait-and-below {
@media only screen and (max-width : $mq-tablet-portrait) {
@content;
}
}
// Everything above and including the portrait width of the tablet
@mixin tablet-portrait-and-up {
@media only screen and (min-width : $mq-mobile-landscape + 1) {
@content;
}
}
// Larger than portrait but less than or equal to the landscape width
@mixin tablet-landscape-only {
@media only screen and (min-width : $mq-tablet-portrait + 1) and (max-width : $mq-tablet-landscape) {
@content;
}
}
// Up to and including the tablet landscape
@mixin tablet-landscape-and-below {
@media only screen and (max-width : $mq-tablet-landscape) {
@content;
}
}
// Everything larger than portrait tablet
@mixin tablet-landscape-and-up {
@media only screen and (min-width : $mq-tablet-portrait + 1) {
@content;
}
}
// Everything larger than a landscape tablet
@mixin desktop-and-up {
@media only screen and (min-width : $mq-tablet-landscape + 1) {
@content;
}
}
// Everything below and including the desktop
@mixin desktop-and-below {
@media only screen and (max-width : $mq-desktop) {
@content;
}
}
// Everything larger than a landscape tablet but less than or equal to the desktop
@mixin desktop-only {
@media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
@content;
}
}
// Retina screens have a 1.5 pixel ratio, not 2
@mixin retina {
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
@content;
}
}
@hagenburger

This comment has been minimized.

Show comment
Hide comment
@hagenburger

hagenburger Mar 13, 2012

Like it. I often use it the other way round: I serve the phone layout for everything smaller than a tablet instead of serving the tablet layout for everything bigger than a phone.

hagenburger commented Mar 13, 2012

Like it. I often use it the other way round: I serve the phone layout for everything smaller than a tablet instead of serving the tablet layout for everything bigger than a phone.

@andresgutgon

This comment has been minimized.

Show comment
Hide comment
@andresgutgon

andresgutgon Mar 13, 2012

How use that. Can you post an example please ?

Ej.:
+retina(content) ??????

andresgutgon commented Mar 13, 2012

How use that. Can you post an example please ?

Ej.:
+retina(content) ??????

@moeffju

This comment has been minimized.

Show comment
Hide comment
@moeffju

moeffju Mar 13, 2012

@andresgutgon:

+retina
  selector
    more-content: yes
  your-content: here

moeffju commented Mar 13, 2012

@andresgutgon:

+retina
  selector
    more-content: yes
  your-content: here
@anthonyshort

This comment has been minimized.

Show comment
Hide comment
@anthonyshort

anthonyshort Mar 13, 2012

.module {
    @include mobile-only {
        width:auto;
        font-size:12px;
    }
    @include tablet-landscape-and-below {
        width:600px;
        font-size:14px;
        .sidebar {
            display:none;
        }
    }
    @include desktop-only {
        width:400px;
        .sidebar {
            width:200px;
        }
    }
}
Owner

anthonyshort commented Mar 13, 2012

.module {
    @include mobile-only {
        width:auto;
        font-size:12px;
    }
    @include tablet-landscape-and-below {
        width:600px;
        font-size:14px;
        .sidebar {
            display:none;
        }
    }
    @include desktop-only {
        width:400px;
        .sidebar {
            width:200px;
        }
    }
}
@anthonyshort

This comment has been minimized.

Show comment
Hide comment
@anthonyshort

anthonyshort Mar 13, 2012

@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.

Owner

anthonyshort commented Mar 13, 2012

@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.

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Mar 13, 2012

Why did you use only screen ?

  • What about "Do not design for device, design for screen size" ? :p
    I will post something similar I'm working on, using variables.

MoOx commented Mar 13, 2012

Why did you use only screen ?

  • What about "Do not design for device, design for screen size" ? :p
    I will post something similar I'm working on, using variables.
@anthonyshort

This comment has been minimized.

Show comment
Hide comment
@anthonyshort

anthonyshort Mar 13, 2012

Good point, the screen limitation should be ditched I think.

Owner

anthonyshort commented Mar 13, 2012

Good point, the screen limitation should be ditched I think.

@emrecamasuvi

This comment has been minimized.

Show comment
Hide comment
@emrecamasuvi

emrecamasuvi Mar 13, 2012

Looks nice.
But are we supposed to use that much, media query mixins?
4 or 5 is ideal, imho.

emrecamasuvi commented Mar 13, 2012

Looks nice.
But are we supposed to use that much, media query mixins?
4 or 5 is ideal, imho.

@anthonyshort

This comment has been minimized.

Show comment
Hide comment
@anthonyshort

anthonyshort Mar 13, 2012

In a single stylesheet, yeah, you'd be stupid to use all of these at once. I've included a lot of them so that it can support many use cases. People use media queries in a lot of different ways.

Owner

anthonyshort commented Mar 13, 2012

In a single stylesheet, yeah, you'd be stupid to use all of these at once. I've included a lot of them so that it can support many use cases. People use media queries in a lot of different ways.

@emrecamasuvi

This comment has been minimized.

Show comment
Hide comment
@emrecamasuvi

emrecamasuvi Mar 13, 2012

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?

emrecamasuvi commented Mar 13, 2012

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?

@anthonyshort

This comment has been minimized.

Show comment
Hide comment
@anthonyshort

anthonyshort Mar 13, 2012

Something like this

.show-on-phone {
    display:none;
    @include mobile-only {
        display:block;
    }
}

 .hide-on-tablet { 
    display:block;
    @include tablet-only {
        display:none;
    }
}
Owner

anthonyshort commented Mar 13, 2012

Something like this

.show-on-phone {
    display:none;
    @include mobile-only {
        display:block;
    }
}

 .hide-on-tablet { 
    display:block;
    @include tablet-only {
        display:none;
    }
}
@hagenburger

This comment has been minimized.

Show comment
Hide comment
@hagenburger

hagenburger Mar 14, 2012

@MoOx: I think “table”, “phone”, … are more easy to understand than M, L, XL, …—especially for new devs in the team.

hagenburger commented Mar 14, 2012

@MoOx: I think “table”, “phone”, … are more easy to understand than M, L, XL, …—especially for new devs in the team.

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Mar 14, 2012

@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.

MoOx commented Mar 14, 2012

@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.
@anthonyshort

This comment has been minimized.

Show comment
Hide comment
@anthonyshort

anthonyshort Mar 14, 2012

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.

Owner

anthonyshort commented Mar 14, 2012

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.

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Mar 14, 2012

You'r right.
Maybe semantics name are not bad after all. I will add verbose mixins with name like this.
You can use variable in media queries with the latest sass 3.2 available.

MoOx commented Mar 14, 2012

You'r right.
Maybe semantics name are not bad after all. I will add verbose mixins with name like this.
You can use variable in media queries with the latest sass 3.2 available.

@anthonyshort

This comment has been minimized.

Show comment
Hide comment
@anthonyshort

anthonyshort Mar 15, 2012

Bit more research to do with common device widths: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

Specifically, this image - http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png

Judging from this I'd say it would be best to use the points:

  • 320
  • 600
  • 800
  • 1024
  • 1280

I'll need to do some more testing though.

Owner

anthonyshort commented Mar 15, 2012

Bit more research to do with common device widths: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

Specifically, this image - http://www.metaltoad.com/sites/default/files/Responsive-Widths_0.png

Judging from this I'd say it would be best to use the points:

  • 320
  • 600
  • 800
  • 1024
  • 1280

I'll need to do some more testing though.

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Mar 15, 2012

Really interesting source.I like the "6 layouts". Maybe I will do something fluid enough to be able to use 3, 4 or 6 layouts as you wish. Hard to code maybe.

MoOx commented Mar 15, 2012

Really interesting source.I like the "6 layouts". Maybe I will do something fluid enough to be able to use 3, 4 or 6 layouts as you wish. Hard to code maybe.

@anointed

This comment has been minimized.

Show comment
Hide comment
@anointed

anointed Mar 21, 2012

Having a few issues on my end trying to implement this concept.
To start I am running Sass 3.2.0alpha.94 bleeding edge

I started by copying the gist above and saving it to my project as _media-queries.scss

When I simply @import "media-queries" into my working scss file I get the following error:
Syntax error: Invalid CSS after "................*/": expected selector or at-rule, was ......

It seems to get stuck at the initial import rule. Is there a different vs. of Sass or something that I should be using to solve this error?

anointed commented Mar 21, 2012

Having a few issues on my end trying to implement this concept.
To start I am running Sass 3.2.0alpha.94 bleeding edge

I started by copying the gist above and saving it to my project as _media-queries.scss

When I simply @import "media-queries" into my working scss file I get the following error:
Syntax error: Invalid CSS after "................*/": expected selector or at-rule, was ......

It seems to get stuck at the initial import rule. Is there a different vs. of Sass or something that I should be using to solve this error?

@anthonyshort

This comment has been minimized.

Show comment
Hide comment
@anthonyshort

anthonyshort Jun 20, 2012

@anointed I'm fairly sure you'll need a more recent version of the Sass alpha

Owner

anthonyshort commented Jun 20, 2012

@anointed I'm fairly sure you'll need a more recent version of the Sass alpha

@anointed

This comment has been minimized.

Show comment
Hide comment
@anointed

anointed Jun 21, 2012

thnx, all sorted now

anointed commented Jun 21, 2012

thnx, all sorted now

@bhargav2785

This comment has been minimized.

Show comment
Hide comment
@bhargav2785

bhargav2785 Jun 1, 2013

are you updating it right now ?

bhargav2785 commented Jun 1, 2013

are you updating it right now ?

@jpweller

This comment has been minimized.

Show comment
Hide comment
@jpweller

jpweller Apr 29, 2014

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.

jpweller commented Apr 29, 2014

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.

@davidnormo

This comment has been minimized.

Show comment
Hide comment
@davidnormo

davidnormo May 5, 2014

Thanks anthonyshort, very helpful little gist.
What do you think of this as an improvement to the API?
https://gist.github.com/davidnormo/d6f93cf94b445640de80

To summerise:

  • Removed -only suffixes as they are superflous
  • Changed -below to -down as down is the opposite to up, therefore makes the naming more intuitive (also reduces length by 1 char, bonus!).

davidnormo commented May 5, 2014

Thanks anthonyshort, very helpful little gist.
What do you think of this as an improvement to the API?
https://gist.github.com/davidnormo/d6f93cf94b445640de80

To summerise:

  • Removed -only suffixes as they are superflous
  • Changed -below to -down as down is the opposite to up, therefore makes the naming more intuitive (also reduces length by 1 char, bonus!).
@hdodov

This comment has been minimized.

Show comment
Hide comment
@hdodov

hdodov Jun 8, 2017

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.

hdodov commented Jun 8, 2017

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.

@gempir

This comment has been minimized.

Show comment
Hide comment
@gempir

gempir Feb 23, 2018

@anthonyshort what is this licensed under?

gempir commented Feb 23, 2018

@anthonyshort what is this licensed under?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment