Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.0)
// Compass (v1.0.0)
// ----


    // Create a map containing breakpoints
    // 
    $breakpoints:(
      all    : 0     0,
      mobile : 0     640px, 
      tablet : 641px 960px, 
      desktop: 961px 1200px, 
      large  : 1201px 0
    );
    $breakpoints-units:'em';
    
    // Define global variables for keeping state
    $current-breakpoint:'' !global;
    $current-context   :'' !global;
    
    // Media - just my name for breakpoint 
    // @media is after all what is returned :)
    @mixin media($breakpointlabels...){
      // Loop thru passed breakpoint keys
      @each $key in $breakpointlabels {
        $value:map-get($breakpoints,$key);
        $min:if(length($value)>0, nth($value,1), null); // add unit conversion
        $max:if(length($value)>1, nth($value,2), null);
        $mq :' all'; 
        $mq : $mq + if($min>0 or $max>0,' and ','');
        $mq : $mq + if($min>0,'(min-width:'+$min+')','');
        $mq : $mq + if($min>0 and $max>0,' and ','');
        $mq : $mq + if($max>0,'(max-width:'+$max+')','');
        $mq : unquote($mq);
        @media #{$mq} { 
            $current-breakpoint:$key !global;
            @content;
            $current-breakpoint:'' !global;
        }
      }
    }
    @mixin new-extend($name){
      
      %#{$current-context + $name}{ @content;}
    }
    @mixin extends(){
      @each $key, $value in $breakpoints {
        @include media($key){ 
          $current-context:$key !global;
          @content;
          $current-context:'' !global;
        }
      }
      @content;
    }
    @mixin extend($name){ & { @extend %#{$current-breakpoint+$name}; } }
    
    @include extends(){
      @include new-extend(foo){ hello:foo; }
      @include new-extend(bar){ hello:bar; }
      @include new-extend(doh){ hello:doh; }
    };



  
    .a {  @include media(mobile,tablet){ 
        @include extend(foo); 
        } 
      }
    .c {  @include media(tablet){ 
        @include extend(foo); 
        @include extend(bar); 
        @include extend(doh); 
        } 
      }
    @include media(tablet){ 
      normal:'dsddd';
      a { @include extend(doh); }
    }

  .outofscope { @extend %foo; joe:jane; }


    //  %#{$key + '-foo'}{ mynameis:foo; context:$key; }
    //  %#{$key + '-bar'}{ mynameis:bar; context:$key; }
  

SassMeister-output.css

@media all and (max-width: 640px) {
  .a {
    hello: foo; } }
@media all and (min-width: 641px) and (max-width: 960px) {
  .a, .c {
    hello: foo; }

  .c {
    hello: bar; }

  .c, a {
    hello: doh; } }
.outofscope {
  hello: foo; }

@media all and (min-width: 641px) and (max-width: 960px) {
  normal: 'dsddd'; }
.outofscope {
  joe: jane; }