Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="wrap">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// http://sassmeister.com/gist/e3bb962338c6cbf8c76c
// ----

$bonred: red;
$bonblue: blue;

#wrap {
  max-width: 1280px;
  &:after {
    clear: both;
    display: block;
    content: "";
  }
}

#content {
  &:after {
    color: $bonred;
    content: "content > 480";
  }
  @media (min-width: 480px) {
    width: 100%;
    &:after {
      content: "content 480";
    }
  }
  @media (min-width: 640px) {
    width: 100%;
    &:after {
      content: "content 640";
    }
  }
  @media (min-width: 720px) {
    width: 100%;
    &:after {
      content: "content 720";
    }
  }
  @media (min-width: 980px) {
    width: 60%;
    float: left;
    &:after {
      content: "content 980";
    }
  }
  @media (min-width: 1280px) {
    width: 50%;
    float: left;
    &:after {
      content: "content 1280";
    }
  }
}

#sidebar {
  &:after {
    color: $bonblue;
    content: "sidebar > 480";
  }
  @media (min-width: 480px) {
    width: 100%;
    &:after {
      content: "sidebar 480";
    }
  }
  @media (min-width: 640px) {
    width: 100%;
    &:after {
      content: "sidebar 640";
    }
  }
  @media (min-width: 720px) {
    width: 100%;
    &:after {
      content: "sidebar 720";
    }
  }
  @media (min-width: 980px) {
    width: 40%;
    float: right;
    &:after {
      content: "sidebar 980";
    }
  }
  @media (min-width: 1280px) {
    width: 50%;
    float: right;
    &:after {
      content: "sidebar 1280";
    }
  }
}

SassMeister-output.css

#wrap {
  max-width: 1280px;
}
#wrap:after {
  clear: both;
  display: block;
  content: "";
}

#content:after {
  color: red;
  content: "content > 480";
}
@media (min-width: 480px) {
  #content {
    width: 100%;
  }
  #content:after {
    content: "content 480";
  }
}
@media (min-width: 640px) {
  #content {
    width: 100%;
  }
  #content:after {
    content: "content 640";
  }
}
@media (min-width: 720px) {
  #content {
    width: 100%;
  }
  #content:after {
    content: "content 720";
  }
}
@media (min-width: 980px) {
  #content {
    width: 60%;
    float: left;
  }
  #content:after {
    content: "content 980";
  }
}
@media (min-width: 1280px) {
  #content {
    width: 50%;
    float: left;
  }
  #content:after {
    content: "content 1280";
  }
}

#sidebar:after {
  color: blue;
  content: "sidebar > 480";
}
@media (min-width: 480px) {
  #sidebar {
    width: 100%;
  }
  #sidebar:after {
    content: "sidebar 480";
  }
}
@media (min-width: 640px) {
  #sidebar {
    width: 100%;
  }
  #sidebar:after {
    content: "sidebar 640";
  }
}
@media (min-width: 720px) {
  #sidebar {
    width: 100%;
  }
  #sidebar:after {
    content: "sidebar 720";
  }
}
@media (min-width: 980px) {
  #sidebar {
    width: 40%;
    float: right;
  }
  #sidebar:after {
    content: "sidebar 980";
  }
}
@media (min-width: 1280px) {
  #sidebar {
    width: 50%;
    float: right;
  }
  #sidebar:after {
    content: "sidebar 1280";
  }
}

SassMeister-rendered.html

<div id="wrap">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>