Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----

$resolution-default: 2 !default;
$resolution-presets: (
  "ldpi" 75%,
  "mdpi" 100%,
  "hdpi" 150%,
  "xhdpi" 200%,
  "xxhdpi" 300%,
  "xxxhdpi" 400%,
  "retina" 2,
  "@2x" 2,
  "@3x" 3
) !default;

@function resolution-preset($resolution) {
  @if type-of($resolution) == "string" {
    @each $preset in $resolution-presets {
      @if nth($preset, 1) == $resolution {
        @return nth($preset, 2)
      }
    }
  }
  @return $resolution;
}

@mixin resolution($resolution: $resolution-default) {
  $resolution: resolution-preset($resolution);
  @if type-of($resolution) == "number" {
    @if unit($resolution) == "dpi" {
      $resolution: $resolution / 96dpi;
    } @else if unit($resolution) == "%" {
      $resolution: $resolution / 100%;
    } @else {
      $resolution: $resolution / ($resolution * 0 + 1)
    }
    @media (-webkit-min-device-pixel-ratio: #{$resolution}), (min-resolution: #{$resolution * 96dpi}) {
      @content;
    }
  } @else {
    @error "#{$resolution} is not a valid resolution or preset";
  }
}

.example {
  @include resolution {
    content: "default";
  }
  @include resolution(2dppx) {
    content: "2dppx";
  }
  @include resolution(192dpi) {
    content: "192dpi";
  }
  @include resolution(1.5) {
    content: "1.5";
  }
  @include resolution(3dppx) {
    content: "3dppx";
  }
  @include resolution(2.5) {
    content: "2.5";
  }
  @include resolution(240dpi) {
    content: "240dpi";
  }
  @include resolution(retina) {
    content: "retina";
  }
  @include resolution(hdpi) {
    content: "hdpi";
  }
  @include resolution(xhdpi) {
    content: "xhdpi";
  }
  @include resolution(xxhdpi) {
    content: "xxhdpi";
  }
  @include resolution(3x) {
    content: "3x";
  }
  @include resolution("@3x") {
    content: "@3x";
  }
  @include resolution(150%) {
    content: "150%";
  }
}

SassMeister-output.css

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "default";
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "2dppx";
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "192dpi";
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .example {
    content: "1.5";
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .example {
    content: "3dppx";
  }
}
@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi) {
  .example {
    content: "2.5";
  }
}
@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi) {
  .example {
    content: "240dpi";
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "retina";
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .example {
    content: "hdpi";
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "xhdpi";
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .example {
    content: "xxhdpi";
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .example {
    content: "3x";
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .example {
    content: "@3x";
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .example {
    content: "150%";
  }
}