Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Hello World!</h1>
  
<p class="retina-test"></p>
  <a href="javascript:void((function(d){if(self!=top||d.getElementById(&#039;toolbar&#039;)&amp;&amp;d.getElementById(&#039;toolbar&#039;).getAttribute(&#039;data-resizer&#039;))return false;d.write(&#039;&lt;!DOCTYPE HTML&gt;&lt;html style=&quot;opacity:0;&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;/&gt;&lt;/head&gt;&lt;body&gt;&lt;a data-viewport=&quot;320x480&quot; data-icon=&quot;mobile&quot;&gt;Mobile (e.g. Apple iPhone)&lt;/a&gt;&lt;a data-viewport=&quot;320x568&quot; data-icon=&quot;mobile&quot; data-version=&quot;5&quot;&gt;Apple iPhone 5&lt;/a&gt;&lt;a data-viewport=&quot;600x800&quot; data-icon=&quot;small-tablet&quot;&gt;Small Tablet&lt;/a&gt;&lt;a data-viewport=&quot;768x1024&quot; data-icon=&quot;tablet&quot;&gt;Tablet (e.g. Apple iPad 2-3rd, mini)&lt;/a&gt;&lt;a data-viewport=&quot;1280x800&quot; data-icon=&quot;notebook&quot;&gt;Widescreen&lt;/a&gt;&lt;a data-viewport=&quot;1920&times;1080&quot; data-icon=&quot;tv&quot;&gt;HDTV 1080p&lt;/a&gt;&lt;script src=&quot;http://lab.maltewassermann.com/viewport-resizer/resizer.min.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;&#039;)})(document));">Resizer</a>

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

h1 {
  color: green;
}

@media (min-width: 30em) {
  h1 {
    color: red;
  }
}

@media (min-width: 40em) {
  h1 {
    color: darkblue;
    background-color: lightblue;
  }
}

/* Multiple matches must be met */
/*@media (min-width: 40em) and (max-width: 45em) {
  h1 {
    color: darkblue;
    background-color: lightblue;
  }
}*/

/* Multiple but any one that matches will trigger */
/*@media (min-width: 40em), (min-height: 20em) {
  h1 {
    color: darkblue;
    background-color: lightblue;
  }
}*/

@media (min-width: 50em) {
  h1 {
    color: black;
    font-size:3em;
    padding: 2em;
  }
}
.retina-test {
  width:215px;
  height:269px;
  background: url(http://i.cubeupload.com/nRYA4l.jpg) no-repeat top left;
}

/* Correct MQ for pixel ratio */
/*@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .retina-test {
    width:430px;
    height:538px;
    background: url(http://i.cubeupload.com/syuSkA.jpg) no-repeat top left;
  }
}
*/
/* MQ for showing what it does since you cant fake pixel ratio */
/*@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-width:50em) {
  .retina-test {
    width:430px;
    height:538px;
    background: url(http://i.cubeupload.com/syuSkA.jpg) no-repeat top left;
  }
}*/

SassMeister-output.css

h1 {
  color: green; }

@media (min-width: 30em) {
  h1 {
    color: red; } }

@media (min-width: 40em) {
  h1 {
    color: darkblue;
    background-color: lightblue; } }

/* Multiple matches must be met */
/*@media (min-width: 40em) and (max-width: 45em) {
  h1 {
    color: darkblue;
    background-color: lightblue;
  }
}*/
/* Multiple but any one that matches will trigger */
/*@media (min-width: 40em), (min-height: 20em) {
  h1 {
    color: darkblue;
    background-color: lightblue;
  }
}*/
@media (min-width: 50em) {
  h1 {
    color: black;
    font-size: 3em;
    padding: 2em; } }

.retina-test {
  width: 215px;
  height: 269px;
  background: url(http://i.cubeupload.com/nRYA4l.jpg) no-repeat top left; }

/* Correct MQ for pixel ratio */
/*@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .retina-test {
    width:430px;
    height:538px;
    background: url(http://i.cubeupload.com/syuSkA.jpg) no-repeat top left;
  }
}
*/
/* MQ for showing what it does since you cant fake pixel ratio */
/*@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-width:50em) {
  .retina-test {
    width:430px;
    height:538px;
    background: url(http://i.cubeupload.com/syuSkA.jpg) no-repeat top left;
  }
}*/

SassMeister-rendered.html

<h1>Hello World!</h1>
  
<p class="retina-test"></p>
  <a href="javascript:void((function(d){if(self!=top||d.getElementById(&#039;toolbar&#039;)&amp;&amp;d.getElementById(&#039;toolbar&#039;).getAttribute(&#039;data-resizer&#039;))return false;d.write(&#039;&lt;!DOCTYPE HTML&gt;&lt;html style=&quot;opacity:0;&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;/&gt;&lt;/head&gt;&lt;body&gt;&lt;a data-viewport=&quot;320x480&quot; data-icon=&quot;mobile&quot;&gt;Mobile (e.g. Apple iPhone)&lt;/a&gt;&lt;a data-viewport=&quot;320x568&quot; data-icon=&quot;mobile&quot; data-version=&quot;5&quot;&gt;Apple iPhone 5&lt;/a&gt;&lt;a data-viewport=&quot;600x800&quot; data-icon=&quot;small-tablet&quot;&gt;Small Tablet&lt;/a&gt;&lt;a data-viewport=&quot;768x1024&quot; data-icon=&quot;tablet&quot;&gt;Tablet (e.g. Apple iPad 2-3rd, mini)&lt;/a&gt;&lt;a data-viewport=&quot;1280x800&quot; data-icon=&quot;notebook&quot;&gt;Widescreen&lt;/a&gt;&lt;a data-viewport=&quot;1920&times;1080&quot; data-icon=&quot;tv&quot;&gt;HDTV 1080p&lt;/a&gt;&lt;script src=&quot;http://lab.maltewassermann.com/viewport-resizer/resizer.min.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;&#039;)})(document));">Resizer</a>