mq()+ is a Sass library that helps you compose media queries in an elegant way.
Sass MQ was crafted in-house at the Guardian and is improved upon by many contributors.
This fork provides various, often much-requested, enhancements over the original. If you already use @kaelig's mixin, you know how to use MQ+.
Note: This fork is always one minor version ahead of the primary package.
- moved core operations from the mixin to a function
- this separation allows media queries to be chained through the
- added a
$media-featureparameter to allow media queries to target a different feature (device dimensions, aspect ratios, color, and resolution)
Here is a very basic example:
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.
How to use it
mq() can be played with on SassMeister:
- with Bower:
bower install mcaskill-sass-mq --save
- with npm:
npm install @mcaskill/sass-mq --savesupports eyeglass
- with yarn:
yarn add @mcaskill/sass-mqsupports eyeglass
OR Download _mq.scss into your Sass project.
- with Bower:
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;// Name your breakpoints in a way that creates a ubiquitous language// across team members. It will improve communication between// stakeholders, designers, developers, and testers.;// Define the breakpoint from the $mq-breakpoints list that should// be used as the target width when outputting a static stylesheet// (when $mq-responsive is set to 'false').;// 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. For example: (mobile, tablet, desktop).;// If _mq.scss is in your project:;// With eyeglass:;// With webpack (and boilerplates such as create-react-app);
Play around with
Responsive mode ON (default)
mq() takes up to three optional parameters:
$and: additional custom directives
$or: alternate custom directives
heightof the output device's rendering surface
$until as a keyword is a hard limit i.e. it's breakpoint - 1.
Responsive mode OFF
To enable support for browsers that do not support
(IE <= 8, Firefox <= 3, Opera <= 9) set
Tip: create a separate stylesheet served exclusively to these browsers, for example with conditional comments.
@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
The static output will only include
@media queries that start at or
span this breakpoint and which have no custom
Verbose and shortand notations
Sometimes you’ll want to be extra verbose (for example, if you’re developing a library based on top of sass-mq), however for readability in a codebase, the shorthand notation is recommended.
All of these examples output the exact same thing, and are here for reference so you can use the notation that best matches your needs:
// Verbose// Omitting argument names// Omitting tailing arguments// Recommended
Adding custom breakpoints
Changing media type
If you want to specify a media type, for example to output styles
for screens only, set
mq() takes an optional
$media-type parameter for specific types:
Seeing the currently active breakpoint
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.
// Adapt the list to include breakpoint names from your project;
Generating the documentation
Sass MQ is documented using SassDoc.
Generate the documentation locally:
Generate & deploy the documentation to https://mcaskill.github.io/sass-mq/:
npm run sassdoc