Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="col1">
  <h1>Main</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, nesciunt, odio nemo doloremque maxime aperiam? Perferendis, odio, maxime, magnam accusantium provident veniam ea culpa cum suscipit illum non voluptatum quibusdam.</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

$small-break: 400px;
$large-break: 800px;

@mixin mq($size) {
  @if $size == small {
    @media screen and (max-width: $small-break) { 
      @content; 
    }
  }
  @else if $size == medium {
    @media screen and (min-width: $small-break) and (max-width: $large-break) { 
      @content; 
    }
  }
  @else if $size == large {
    @media only screen and (min-width: $large-break) { 
      @content; 
    }
  }
}
body {
  font: 1em/1.6em sans-serif ;
  margin: 1em;
}

SassMeister-output.css

body {
  font: 1em/1.6em sans-serif;
  margin: 1em;
}

SassMeister-rendered.html

<div class="col1">
  <h1>Main</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, nesciunt, odio nemo doloremque maxime aperiam? Perferendis, odio, maxime, magnam accusantium provident veniam ea culpa cum suscipit illum non voluptatum quibusdam.</p>
</div>