Generated by SassMeister.com.

SassMeister-input-HTML.html

<div></div>

SassMeister-input.scss

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

@mixin max-width($breakpoint) {
  @media only screen and (max-width: $breakpoint) { @content; }
}

@mixin min-width($breakpoint) {
  @media only screen and (min-width: $breakpoint) { @content; }
}

div{
  height: 100px;
  width: 100px;
  background: blue;
  
  @include max-width(800px){
    background: green;
  }
  
  @include max-width(500px){
    background: red;
  }
}

SassMeister-output.css

div {
  height: 100px;
  width: 100px;
  background: blue;
}
@media only screen and (max-width: 800px) {
  div {
    background: green;
  }
}
@media only screen and (max-width: 500px) {
  div {
    background: red;
  }
}

SassMeister-rendered.html

<div></div>