Generated by SassMeister.com.

SassMeister-input-HTML.haml

.block

SassMeister-input.scss

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

@import "include-media";
// --------------------------------------------


// Configs set for using include-media lib
$media-expressions: (
  'screen': 'only screen',
  'landscape': '(orientation: landscape)',
  'portrait': '(orientation: portrait)',
  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
);

$breakpoints: (
    phone: 736px,
    tablet: 1024px,
    desktop-large: 1280px
);


// Example base CSS for UI
// Consider this an "IE8 First" solution
// assuming a 1024px x 768px legacy standard
.block {
  width: 984px;
  height: 5em;
  margin: 0 auto;
  background-color: red;
}


// All variances are broken into their respective media queries
.block {
  // target all 'handheld' devices
  @include media("screen", "<=phone") {
    width: 100%;
    background-color: pink;
  }
  // typical target for 'handhelds' when minor adjustments
  // are needed when in landscape view state
  @include media("screen", "landscape", "<phone") {
    width: 100%;
    background-color: purple;
  }
  // target majority of tablet devices
  @include media("screen", ">phone", "<tablet") {
    width: 900px;
    background-color: yellow;
  }
  // typical target for tablets when minor adjustments
  // are needed when in portrait view state
  @include media("screen", "portrait", ">phone", "<tablet") {
    width: 700px;
    background-color: orange;
  }
  // target for large screen devices and monitors
  @include media("screen", ">=desktop-large") {
    width: 1128px;
    background-color: green;
  }
}

SassMeister-output.css

.block {
  width: 984px;
  height: 5em;
  margin: 0 auto;
  background-color: red;
}

@media only screen and (max-width: 736px) {
  .block {
    width: 100%;
    background-color: pink;
  }
}

@media only screen and (orientation: landscape) and (max-width: 735px) {
  .block {
    width: 100%;
    background-color: purple;
  }
}

@media only screen and (min-width: 737px) and (max-width: 1023px) {
  .block {
    width: 900px;
    background-color: yellow;
  }
}

@media only screen and (orientation: portrait) and (min-width: 737px) and (max-width: 1023px) {
  .block {
    width: 700px;
    background-color: orange;
  }
}

@media only screen and (min-width: 1280px) {
  .block {
    width: 1128px;
    background-color: green;
  }
}

SassMeister-rendered.html

<div class='block'></div>