_after-import.scss

// Styles for responsive and static output, wrapped in a mixin for reuse.
@mixin styles {
    // Up to mobile
    @include mq($until: mobile) {
        content: "to-mobile";
    }
    // From mobile and up
    @include mq($from: mobile) {
        content: "from-mobile";
    }
    // From mobile to tablet (exclusive)
    @include mq($from: mobile, $until: tablet) {
        content: "from-mobile-to-tablet";
    }
    // From unitless value
    @include mq(640) {
        content: "from-640";
    }
    // Up to tablet
    @include mq($until: tablet) {
        content: "to-tablet";
    }
    // Combine upper limit and custom directive
    @include mq($until: tablet, $and: '(orientation: landscape)') {
        content: "to-tablet-and-orientation-landscape";
    }
    // From tablet and up
    @include mq($from: tablet) {
        content: "from-tablet";
    }
    // From tablet to desktop (exclusive)
    @include mq($from: tablet, $until: desktop) {
        content: "from-tablet-to-desktop";
    }
    // Combine unitless boundaries and custom directive
    @include mq(768, 1023, $and: '(orientation: portrait)') {
        content: "from-768-to-1023-and-orientation-portrait";
    }
    // From desktop and up
    @include mq($from: desktop) {
        content: "from-desktop";
    }
    // From em value
    @include mq($until: 70em) {
        content: "to-70em";
    }
    // To pixel value
    @include mq($until: 1100px) {
        content: "to-1100px";
    }
    // From desktop to widescreen (exclusive)
    @include mq($from: desktop, $until: widescreen) {
        content: "from-desktop-to-widescreen";
    }
    // From widescreen and up
    @include mq($from: widescreen) {
        content: "from-widescreen";
    }
    // From widescreen to tvscreen (exclusive)
    @include mq($from: widescreen, $until: tvscreen) {
        content: "from-widescreen-to-tvscreen";
    }
    // From tvscreen and up
    @include mq($from: tvscreen) {
        content: "from-tvscreen";
    }
    // Custom @media query
    @include mq($and: '(-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi), (min-resolution: 1.3dppx)') {
        content: "hidpi-screen";
    }
    // Empty @media query
    @include mq() {
        content: "empty-media-query";
    }

    @include mq-add-breakpoint(cinema, 4096px);
    @include mq(cinema) {
        content: "from-cinema";
    }
    /* Added a custom breakpoint: #{inspect($mq-breakpoints)} */

    @include mq-add-breakpoint(tiny, 16px);
    /* Added a tiny breakpoint: #{inspect($mq-breakpoints)} */

    @include mq-add-breakpoint(tiny2, 16px);
    @include mq(tiny2) {
        content: "from-tiny2";
    }
    /* Added a tiny2 breakpoint at a previously added size: #{inspect($mq-breakpoints)} */

    @include mq-add-breakpoint(tablet2, 640px);
    @include mq(tablet2) {
        content: "from-tablet2";
    }
    /* Added a tablet2 breakpoint at an existing initial size (already in $mq-breakpoints):
        #{inspect($mq-breakpoints)} */

    @include mq-add-breakpoint(middle, 550px);
    /* Added a breakpoint in the middle #{inspect($mq-breakpoints)} */

    @include mq($until: cinema) {
        content: "to-cinema";
    }
    $my-breakpoints: (
        L: 900px,
        XL: 1200px
    );
    $my-static-breakpoint: L;
    @include mq($from: L, $breakpoints: $my-breakpoints, $static-breakpoint: $my-static-breakpoint) {
        content: "custom-breakpoint-list";
    }
}

/* Responsive styles for devices that understand media queries */
.responsive:after {
    @include styles;
}

/* Rasterized styles that span or start at the "desktop" breakpoint */
// (e.g. to serve to IE8 via conditional comments in a separate stylesheet)
$mq-responsive:        false;
$mq-static-breakpoint: desktop;

.static:after {
    @include styles;
}

.static-forced:after {
    @include mq(mobile, desktop, $static-breakpoint: tablet, $responsive: false) {
        content: "Static, forced to tablet";
    }
    @include mq(desktop, $static-breakpoint: tablet, $responsive: false) {
        content: "Should not appear, because out of the bounds of $static-breakpoint";
    }
}

/* Do not rasterize print media queries into when $mq-responsive is false */
$mq-responsive: false;
$mq-media-type: all;

@include mq($media-type: 'print') {
    .print:after {
        content: "Should not appear, because print style only";
    }
}

/* Only style screen media type */
$mq-responsive: true;
$mq-media-type: screen;
body {
    @include mq($until: mobile) {
        font-size: 1rem;
    }
    @include mq($until: mobile, $media-type: 'screen, print') {
        content: "screen-and-print";
    }
}
/* Only style print media type */
$mq-media-type: print;
body {
    @include mq($until: mobile) {
        font-size: 2rem;
    }
}