mq()
is a Sass mixin that helps you compose media queries in an elegant
way.
- compiles keywords and
px
/em
values toem
-based queries (a good thing) - provides fallbacks for older browsers (see Mobile-first Responsive Web Design and IE8 on the Guardian's developer blog).
Here is a very basic example:
$mq-breakpoints: (
mobile: 320px,
tablet: 740px,
desktop: 980px,
wide: 1300px
);
@import 'mq';
.foo {
@include mq($from: mobile, $until: tablet) {
background: red;
}
@include mq($from: tablet) {
background: green;
}
}
Compiles to:
@media (min-width: 20em) and (max-width: 46.24em) {
.foo {
background: red;
}
}
@media (min-width: 46.25em) {
.foo {
background: green;
}
}
Sass MQ was crafted in-house at the Guardian. Today, many more companies and developers are using it in their projects: see who uses Sass MQ.
Immediately play with it on SassMeister: @import 'mq';
.
OR:
-
Install with Bower:
bower install sass-mq --save
OR Install with npm:
npm install sass-mq --save
it supports eyeglassOR Download _mq.scss to your Sass project.
-
Import the partial in your Sass files and override default settings with your own preferences before the file is imported:
// To enable support for browsers that do not support @media queries, // (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false // Create a separate stylesheet served exclusively to these browsers, // meaning @media queries will be rasterized, relying on the cascade itself $mq-responsive: true; // Name your breakpoints in a way that creates a ubiquitous language // across team members. It will improve communication between // stakeholders, designers, developers, and testers. $mq-breakpoints: ( mobile: 320px, tablet: 740px, desktop: 980px, wide: 1300px, // Tweakpoints desktopAd: 810px, mobileLandscape: 480px ); // Define the breakpoint from the $mq-breakpoints list that should // be used as the target width when outputting a static stylesheet // (i.e. when $mq-responsive is set to 'false'). $mq-static-breakpoint: desktop; // If you want to display the currently active breakpoint in the top // right corner of your site during development, add the breakpoints // to this list, ordered by width, e.g. (mobile, tablet, desktop). $mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide); @import 'path/to/mq'; // With eyeglass: // @import 'sass-mq';
-
Play around with
mq()
(see below)
mq()
takes up to three optional parameters:
$from
: inclusivemin-width
boundary$until
: exclusivemax-width
boundary$and
: additional custom directives
Note that $until
as a keyword is a hard limit i.e. it's breakpoint - 1.
.responsive {
// Apply styling to mobile and upwards
@include mq($from: mobile) {
color: red;
}
// Apply styling up to devices smaller than tablets (exclude tablets)
@include mq($until: tablet) {
color: blue;
}
// Same thing, in landscape orientation
@include mq($until: tablet, $and: '(orientation: landscape)') {
color: hotpink;
}
// Apply styling to tablets up to desktop (exclude desktop)
@include mq(tablet, desktop) {
color: green;
}
}
To enable support for browsers that do not support @media
queries,
(IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive: false
.
Tip: create a separate stylesheet served exclusively to these browsers, for example with conditional comments.
When @media
queries are rasterized, browsers rely on the cascade
itself. Learn more about this technique on Jake’s blog.
To avoid rasterizing styles intended for displays larger than what those
older browsers typically run on, set $mq-static-breakpoint
to match
a breakpoint from the $mq-breakpoints
list. The default is
desktop
.
The static output will only include @media
queries that start at or
span this breakpoint and which have no custom $and
directives:
$mq-responsive: false;
$mq-static-breakpoint: desktop;
.static {
// Queries that span or start at desktop are compiled:
@include mq($from: mobile) {
color: lawngreen;
}
@include mq(tablet, wide) {
color: seagreen;
}
@include mq($from: desktop) {
color: forestgreen;
}
// But these queries won’t be compiled:
@include mq($until: tablet) {
color: indianred;
}
@include mq($until: tablet, $and: '(orientation: landscape)') {
color: crimson;
}
@include mq(mobile, desktop) {
color: firebrick;
}
}
@include mq-add-breakpoint(tvscreen, 1920px);
.hide-on-tv {
@include mq(tvscreen) {
display: none;
}
}
While developing, it can be nice to always know which breakpoint is
active. To achieve this, set the $mq-show-breakpoints
variable to
be a list of the breakpoints you want to debug, ordered by width.
The name of the active breakpoint and its pixel and em values will
then be shown in the top right corner of the viewport.
If you want to specify a media type, for example to output styles
for screens only, set $mq-media-type
:
$mq-media-type: screen;
.screen-only-element {
@include mq(mobile) {
width: 300px;
}
}
@media screen and (max-width: 19.99em) {
.screen-only-element {
width: 300px;
}
}
-
Install dependencies:
npm install
-
Ruby Sass, LibSass, and eyeglass integration:
./test.sh
-
there should be a couple of warnings like this one, this is normal:
WARNING: Assuming 640 to be in pixels, attempting to convert it into pixels on line 74 of _mq.scss, in `mq'
-
if
git diff test/*.css
shows no changes, tests pass
Sass MQ is documented using SassDoc:
npm install -g sassdoc
Then, generate the documentation using:
sassdoc .
Generate & deploy the documentation to http://sass-mq.github.io/sass-mq/:
./sassdoc.sh
- https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_conditionals.scss
- https://github.com/bits-sass/helpers-responsive/blob/master/_responsive.scss
- https://gist.github.com/magsout/5978325
- http://jakearchibald.github.io/sass-ie/
- http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
- http://cognition.happycog.com/article/fall-back-to-the-cascade
- http://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8
Sass MQ was developed in-house at the Guardian.
These companies and projects use Sass MQ:
- The Guardian
- BBC (Homepage, Sport, News, Programmes)
- The Financial Times
- Rightmove
- Stockholm International Fairs and Congress Centre
- Beyond
- EQ Design
- Baseguide
- Base Creative
- Locomotive
- You? Open an issue
Looking for a more advanced sass-mq, with support for height and other niceties?
Give @mcaskill's fork of sass-mq a try.