Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----

// Breakpoints map
$breakpoints: (
  // Regular breakpoints
  "resMaxSmall": "(max-width: 500px)",
  "resMaxMedium": "(max-width: 700px)",
  "resMaxLarge": "(max-width: 800px)",
  "resMaxXlarge": "(max-width: 1280px)",

  // Reverso breakpoints
  "resMinSmall": "(min-width: 501px)",
  "resMinMedium": "(min-width: 701px)",
  "resMinLarge": "(min-width: 801px)",
  "resMinXlarge": "(min-width: 1281px)",

  // Exclusive breakpoints
  "resMedium": "(min-width: 501px) and (max-width: 800px)",
  "resLarge": "(min-width: 801px) and (max-width: 1280px)",

  // Extra breakpoints
  "iOS": "(min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px)"
) !default;

// Enable/disable media queries
$MQs: true !default;

// Output a media query named after `$point`.
// @param {String} $point
// @requires $breakpoints
// @requires $MQs
@mixin breakpoint($point) {
  $query: map-get($breakpoints, $point);
  
  @if not $query {
    @warn "Wargin! You are requesting an invalid breakpoint: `#{$point}`. :(";
  }
  
  @else if $MQs {
    @media #{$query} {
      @content;
    }
  }
}

// hidpi: same concept as "responsive", except that this is focusing on
// HiDPI (a.k.a. retina) displays.
@mixin hidpi($media: all) {
	@media 
		only #{$media} and (min--moz-device-pixel-ratio: 1.5),
		only #{$media} and (-o-min-device-pixel-ratio: 3/2),
		only #{$media} and (-webkit-min-device-pixel-ratio: 1.5),
		only #{$media} and (min-device-pixel-ratio: 1.5),
		only #{$media} and (min-resolution: 144dpi),
		only #{$media} and (min-resolution: 1.5dppx) {

		@content;
	}
}


// and just because the term "retina" is so widely used, we'll create
// a mixin that uses that as an alias
@mixin retina($media: all) {
	@include hidpi($media) { @content; }
}
//use
.test {
  color: red;
  
  @include breakpoint(resLarge) {
    color: blue;
  }
  
  @include breakpoint(iOS) {
    color: purple;
  }
  
  @include retina{
    color:green;
  }
}

SassMeister-output.css

.test {
  color: red;
}
@media (min-width: 801px) and (max-width: 1280px) {
  .test {
    color: blue;
  }
}
@media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) {
  .test {
    color: purple;
  }
}
@media only all and (min--moz-device-pixel-ratio: 1.5), only all and (-o-min-device-pixel-ratio: 3 / 2), only all and (-webkit-min-device-pixel-ratio: 1.5), only all and (min-device-pixel-ratio: 1.5), only all and (min-resolution: 144dpi), only all and (min-resolution: 1.5dppx) {
  .test {
    color: green;
  }
}