Generated by SassMeister.com.

SassMeister-input.scss

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

$color: blue;
$tablet: 768px;
@mixin border-radius($radii) {
  border-radius: $radii;
}
@mixin mq($viewport) {
  @media (min-width: $viewport) {
    @content;
  }
}
%cf {
  &:before,
  &:after {
    content: " ";
    display: table;
}
  &:after {
    clear: both;
}
  *zoom: 1;
}

.element {
  $color: #C3C3C3; // Class specific variables

  @extend %cf; // Followed by extends

  @include border-radius(5px); // Then mixins

  // Then any needed CSS
  color: $color;
  padding: 1em 2.4%;

  &:hover {
    background-color: white; // pseudo elements
  }
  
  .box { // any child elements
    background-color: orange;
  }

  .thing & { // contextual overides
    padding: 2em 2.4%;
  }
  
  @include mq(tablet) { // media queries last
    padding: 0.5em 0;
    .box {
      background-color: red;
    }
  }
}

SassMeister-output.css

.element {
  *zoom: 1;
}
.element:before, .element:after {
  content: " ";
  display: table;
}
.element:after {
  clear: both;
}

.element {
  border-radius: 5px;
  color: #c3c3c3;
  padding: 1em 2.4%;
}
.element:hover {
  background-color: white;
}
.element .box {
  background-color: orange;
}
.thing .element {
  padding: 2em 2.4%;
}
@media (min-width: tablet) {
  .element {
    padding: 0.5em 0;
  }
  .element .box {
    background-color: red;
  }
}