Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// Breakpoint (v2.5.0)
// ----

// ======================================================
// Place in external scss file
// ======================================================
// Breakpoint wrapper to handle context when extending
$_breakpoint-context-key-at-render-time:'';
@mixin media($breakpointkeys...){
  @each $key, $value in $breakpointkeys {
    $_breakpoint-context-key-at-render-time:$key !global;
    @include respond-to($key, $no-query:false){ @content; };
    $_breakpoint-context-key-at-render-time:''   !global;
  }
};
// Extend mixins
@mixin extends(){ @content; @each $key, $value in $breakpoints { @include media($key){ @content; } } }
@mixin new-extend($name){ %#{$_breakpoint-context-key-at-render-time + $name}{ @content; } }
@mixin extend($name){ & { @extend %#{$_breakpoint-context-key-at-render-time + $name};  }  }


// ======================================================
// Styles 
// ======================================================
@import "breakpoint";
// @import "thescssabove"

$breakpoints: add-breakpoint(mobile , 0px 480px);
$breakpoints: add-breakpoint(tablet , 480px 960px);
$breakpoints: add-breakpoint(desktop, 961px);



// Create the extends 
@include extends(){
  @include new-extend(foo){ content:'foo'; }
  @include new-extend(bar){ content:'bar'; }
  @include new-extend(doh){ content:'doh'; }
  @include new-extend(doh){ content:'doh number two'; }
}


// At base level normal extend works 
.a { 
  @extend %foo; 
  @include extend(foo);
}

// Double extends work
.b {
  @extend %doh; 
  @include extend(doh);
}

// Nested
.c1 {
  @include media(mobile){
    @include extend(foo);
    @include extend(bar);
    @include extend(doh);
  }
}
.c2 {
  @include media(mobile){
    @include extend(foo);
    @include extend(bar);
    @include extend(doh);
  }
}
// Wrapped
@include media(mobile){
  .c3 {
    @include extend(foo);
    @include extend(bar);
    @include extend(doh);
  }  
}


// Nested multi
.d1 {
  @include media(mobile,tablet){
    @include extend(foo);
  }
  @include media(desktop){
    @include extend(bar);
  }
}

SassMeister-output.css

.a { content: 'foo'; }

.b { content: 'doh'; }

.b { content: 'doh number two'; }

@media (min-width: 0px) and (max-width: 480px) { .c1, .c2, .c3, .d1 { content: 'foo'; }
  .c1, .c2, .c3 { content: 'bar'; }
  .c1, .c2, .c3 { content: 'doh'; }
  .c1, .c2, .c3 { content: 'doh number two'; } }
@media (min-width: 480px) and (max-width: 960px) { .d1 { content: 'foo'; } }
@media (min-width: 961px) { .d1 { content: 'bar'; } }