Generated by SassMeister.com.

SassMeister-input-HTML.haml

.block desktop large
.block.webkit webkit
.block.dppx dppx
.block.resolution min-res

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "include-media";

$media-expressions: (
  'screen': 'only screen',
  'landscape': '(orientation: landscape)',
  'portrait': '(orientation: portrait)',
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
  'webkit': '(-webkit-min-device-pixel-ratio: 2)',
  'dppx': '(min-resolution: 2dppx)',
  'min-resolution': '(min-resolution: 192dpi)'
);

// Creates a list of global breakpoints
//
// @example scss - Creates a single breakpoint with the label `phone`
//  $breakpoints: ('phone': 320px);
//
$breakpoints: (
    desktop: 0px,
    tablet: 30em,
    desktop-large: 1280px
);


.block {
  width: 1in;
  height: 1in;
  float: left;
  margin-right: 1em;
  color: white;
  background-color: red;
}

// .block {
//   @include media("screen", ">=desktop-large") {
//     background-color: green;
//   }
// }

.webkit {
  @include media("webkit") {
    background-color: pink;
  }
}

.dppx {
  @include media("dppx") {
    background-color: orange;
  }
}

.resolution {
  @include media("min-resolution") {
    background-color: purple;
  }
}

SassMeister-output.css

.block {
  width: 1in;
  height: 1in;
  float: left;
  margin-right: 1em;
  color: white;
  background-color: red;
}

@media (-webkit-min-device-pixel-ratio: 2) {
  .webkit {
    background-color: pink;
  }
}

@media (min-resolution: 2dppx) {
  .dppx {
    background-color: orange;
  }
}

@media (min-resolution: 192dpi) {
  .resolution {
    background-color: purple;
  }
}

SassMeister-rendered.html

<div class='block'>desktop large</div>
<div class='block webkit'>webkit</div>
<div class='block dppx'>dppx</div>
<div class='block resolution'>min-res</div>