Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

// Set this to 'true' to test static breakpoint feature ----------- //

$test-static-breakpoint-feature: true;

// Define breakpoints --------------------------------------------- //

$mq-breakpoints: (
    (mobile      320px)
    (tablet      640px)
    (desktop    1024px)
    (widescreen 1200px)
    (tvscreen   1920px)
);

$mq-static-breakpoint: "desktop";

// Include sass-mq ------------------------------------------------ //

// 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 !default;

// 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  300px)
    (tablet  600px)
    (desktop 900px)
    (wide    1260px)
) !default;

// 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" !default;


@function mq-px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return mq-px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

@function mq-retrieve-breakpoint-width($name) {
    @each $breakpoint in $mq-breakpoints {
        $breakpoint-name:  nth($breakpoint, 1);
        $breakpoint-width: nth($breakpoint, 2);

        @if $name == $breakpoint-name {
            @return $breakpoint-width;
        }
    }
    @return 'Breakpoint #{$name} does not exist';
}

// Media Query mixin
// Usage:
// .element {
//     @include mq($from: mobile) {
//         color: red;
//     }
//     @include mq($to: tablet) {
//         color: blue;
//     }
//     @include mq(mobile, tablet) {
//         color: green;
//     }
//     @include mq($from: tablet, $and: '(orientation: landscape)') {
//         color: teal;
//     }
//     @include mq(950px) {
//         color: hotpink;
//     }
// }

@mixin mq($from: false, $to: false, $and: false) {

    // Initialize variables
    $min-width: 0;
    $max-width: 0;
    $mediaQuery: '';

    // From: this breakpoint (inclusive)
    @if $from {
        @if type-of($from) == number {
            $min-width: mq-px2em($from);
        } @else {
            $min-width: mq-px2em(mq-retrieve-breakpoint-width($from));
        }
    }

    // To: that breakpoint (exclusive)
    @if $to {
        @if type-of($to) == number {
            $max-width: mq-px2em($to);
        } @else {
            $max-width: mq-px2em(mq-retrieve-breakpoint-width($to) - 1px);
        }
    }

    // Responsive support is disabled, rasterize the output outside @media blocks
    // The browser will rely on the cascade itself.
    @if ($mq-responsive == false) {
        @if $test-static-breakpoint-feature {
            $static-breakpoint-width: mq-retrieve-breakpoint-width($mq-static-breakpoint);
            @if type-of($static-breakpoint-width) == number {
                $target-width: mq-px2em($static-breakpoint-width);
                // Output only rules that start at or span our target width
                @if ($and == false and ($min-width <= $target-width) and (($to == false) or ($max-width >= $target-width))) {
                    @content;
                }
            } @else {
                // Throw a warning if $mq-static-breakpoint is not in the $mq-breakpoints list
                @warn "No static styles will be output: #{$static-breakpoint-width}";
            }
        } @else {
            // Output rules in min-width statements only
            @if ($from and $to == false and $and == false) {
                @content;
            }
        }
    }

    // Responsive support is enabled, output rules inside @media queries
    @else {
        @if $min-width != 0 { $mediaQuery: '#{$mediaQuery} and (min-width: #{$min-width})'; }
        @if $max-width != 0 { $mediaQuery: '#{$mediaQuery} and (max-width: #{$max-width})'; }
        @if $and            { $mediaQuery: '#{$mediaQuery} and #{$and}'; }

        $mediaQuery: unquote(#{$mediaQuery});

        @media all #{$mediaQuery} {
            @content;
        }
    }
}

// Add a breakpoint
// Usage: $mq-breakpoints: mq-add-breakpoint(tvscreen, 1920px);
// Credit goes to Sam Richard (author of the `respond-to()` mixin)
@function mq-add-breakpoint($name, $breakpoint) {
    $breakpoint: $name $breakpoint;
    $output: append($mq-breakpoints, $breakpoint, 'space');
    @return $output;
}

// Styles for both responsive and static output ------------------- //

@mixin styles {
    @include mq($to: mobile) {
        content: "to-mobile";
    }
    @include mq($from: mobile) {
        content: "from-mobile";
    }
    @include mq($from: mobile, $to: tablet) {
        content: "from-mobile-to-tablet";
    }
    @include mq($to: tablet) {
        content: "to-tablet";
    }
    @include mq($from: tablet) {
        content: "from-tablet";
    }
    @include mq($from: tablet, $to: desktop) {
        content: "from-tablet-to-desktop";
    }
    @include mq($from: desktop) {
        content: "from-desktop";
    }
    @include mq($from: desktop, $to: widescreen) {
        content: "from-desktop-to-widescreen";
    }
    @include mq($from: widescreen) {
        content: "from-widescreen";
    }
    @include mq($from: widescreen, $to: tvscreen) {
        content: "from-widescreen-to-tvscreen";
    }
    @include mq($from: tvscreen) {
        content: "from-tvscreen";
    }
}

/* Responsive output ---------------------------------------------- */

body:before {
    @include styles;
}

/* Static output -------------------------------------------------- */

$mq-responsive: false;

body:after {
    @include styles;
}

/* Styling of test output ----------------------------------------- */

body {
  background-color: black;

  &:before, &:after {
    font-family: monospace;
    font-size: 16px;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
  }

  &:before {
    top: 45%;
    color: hotpink;
  }

  &:after {
    top: 55%;
    color: deepskyblue;
  }
}

SassMeister-output.css

/* Responsive output ---------------------------------------------- */
@media all and (max-width: 19.9375em) {
  body:before {
    content: "to-mobile";
  }
}
@media all and (min-width: 20em) {
  body:before {
    content: "from-mobile";
  }
}
@media all and (min-width: 20em) and (max-width: 39.9375em) {
  body:before {
    content: "from-mobile-to-tablet";
  }
}
@media all and (max-width: 39.9375em) {
  body:before {
    content: "to-tablet";
  }
}
@media all and (min-width: 40em) {
  body:before {
    content: "from-tablet";
  }
}
@media all and (min-width: 40em) and (max-width: 63.9375em) {
  body:before {
    content: "from-tablet-to-desktop";
  }
}
@media all and (min-width: 64em) {
  body:before {
    content: "from-desktop";
  }
}
@media all and (min-width: 64em) and (max-width: 74.9375em) {
  body:before {
    content: "from-desktop-to-widescreen";
  }
}
@media all and (min-width: 75em) {
  body:before {
    content: "from-widescreen";
  }
}
@media all and (min-width: 75em) and (max-width: 119.9375em) {
  body:before {
    content: "from-widescreen-to-tvscreen";
  }
}
@media all and (min-width: 120em) {
  body:before {
    content: "from-tvscreen";
  }
}

/* Static output -------------------------------------------------- */
body:after {
  content: "from-mobile";
  content: "from-tablet";
  content: "from-desktop";
  content: "from-desktop-to-widescreen";
}

/* Styling of test output ----------------------------------------- */
body {
  background-color: black;
}
body:before, body:after {
  font-family: monospace;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
body:before {
  top: 45%;
  color: hotpink;
}
body:after {
  top: 55%;
  color: deepskyblue;
}