A `sass-mq` mixin that uses Jacket

_mj.scss

$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 https://github.com/at-import/jacket
/// @requires {function} mq     https://github.com/mcaskill/sass-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} {
            @content;
        }
    }

    // Responsive support is disabled, rasterize the output outside @media blocks
    // The browser will rely on the cascade itself.
    @include jacket($mq-jacket-legacy) {
        @content;
    }

}

jacket-mq.md

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.

Installation

With Bower

1. bower install jacket --save-dev
2. bower install mcaskill/sass-mq --save-dev
3. bower install jacket-mq=https://gist.github.com/mcaskill/89944b7ef12f37c85c05.git --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;
    }
}