Skip to content

Instantly share code, notes, and snippets.

Created November 23, 2014 22:52
Show Gist options
  • Save mcaskill/89944b7ef12f37c85c05 to your computer and use it in GitHub Desktop.
Save mcaskill/89944b7ef12f37c85c05 to your computer and use it in GitHub Desktop.
A `sass-mq` mixin that uses Jacket
$mq-jacket-support: has-mediaqueries !default;
$mq-jacket-legacy: has-no-mediaqueries !default;
$jacket: append($jacket, $mq-jacket-support) !default;
/// Jacket MQ
/// Create a `@media` query based on a named-breakpoint and
/// possibly ignore the wrapper based on the context of $jacket.
/// @group media-query
/// @author Chauncey McAskill
/// @requires {function} jacket
/// @requires {function} mq
/// @param {Number|String} (false) $from - _Inclusive_ `min-*` boundary
/// @param {Number|String} (false) $until - _Exclusive_ `max-*` boundary
/// @param {Mixin|String} (false) $and - Additional custom directives
/// @param {Mixin|String} (false) $or - Alternate custom directives
/// @param {String} (width) $plane - Either `width` or `height` of the output device's rendering surface
/// @param {String} ($mq-media-type) $type - Specifying media-dependent context
/// @output Depending on the context of $jacket, the @content will be wrapped in a `@media` query.
@mixin mj(
$from: false,
$until: false,
$and: false,
$or: false,
$plane: width,
$type: $mq-media-type,
$to: null
) {
$media-query: mq($from, $until, $and, $or, $plane, $type, $to);
// Responsive support is enabled, output rules inside @media queries
@include jacket($mq-jacket-support) {
@media #{$media-query} {
// Responsive support is disabled, rasterize the output outside @media blocks
// The browser will rely on the cascade itself.
@include jacket($mq-jacket-legacy) {

Media Queries, with a Jacket

mq() is a Sass component that helps manipulating media queries in an elegant way.

This add-on mixin uses Jacket, as a pragmatic alternative to $mq-static-breakpoint, to rasterize @media queries. This allows you to be fastidious as to which @media context should be rasterized, instead of relying on a named-breakpoint representing a specific layout range.


With Bower

  1. bower install jacket --save-dev
  2. bower install mcaskill/sass-mq --save-dev
  3. bower install jacket-mq= --save-dev

Or Download

  1. _jacket.scss
  2. _mq.scss
  3. _mj.scss

Basic Usage

Import the three in your stylesheet, in the respective order above. Follow the instructions outlined in mq() for setting up the mixin. Remove any preferences for $mq-responsive and $mq-static-breakpoint.

mj() uses two variables that can be overriden in your own preferences before the _mj file is imported:

  • $mq-jacket-support: Context for those that support @media queries. Defaults to has-mediaqueries.
  • $mq-jacket-legacy: Context for those that don't support @media. Defaults to has-no-mediaqueries.

Afterwards, follow the instructions outlined in Jacket to define your contexts.

$jacket: $mq-jacket-legacy, ie8;

// [...]

#foo {
    content: 'Basic Styling';

    // This won't be compiled:
    @include mq($from: mobile) {
        color: lawngreen;

    // This will be compiled:
    @include mj($until: tablet) {
        color: indianred;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment