Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----

$enhanced: true !default;

@mixin mq($from: false, $to: false) {
  @media screen and (min-width: #{$from}) {
    @content;
  }
}

@mixin extend($name: '', $breakpoint: '') {
  @if $breakpoint == '' {
    %#{$name} {
      @include border;
    }
    @extend %#{$name};
  } @else {
    @include mq($from: $breakpoint) {
      %#{$name}--compact {
        @include border;
      }
      @extend %#{$name}--compact;
    }
  }
  @content;
}

@mixin border {
  border: 1px solid blue;
}

@include mq($from: compact) {
  %border-compact {
    border: 1px solid red;
  }
}

.box {
  color: red;
  
  @if $enhanced {
    //@include extend(border);
    font-weight: bold;
  
    @include mq($from: compact) {
      @include extend(border, compact);
      color: blue;
    }
  
    @include mq($from: medium) {
      color: green;
    }
  }
}

SassMeister-output.css

.box {
  color: red;
  font-weight: bold;
}
@media screen and (min-width: compact) {
  .box {
    color: blue;
  }
}
@media screen and (min-width: compact) and (min-width: compact) {
  .box .box {
    border: 1px solid blue;
  }
}

@media screen and (min-width: medium) {
  .box {
    color: green;
  }
}