Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="grid">
<div class="col_1"></div>
<div class="col_2"></div>
<div class="col_3"></div>
<div class="col_4"></div>
<div class="col_5"></div>
<div class="col_6"></div>
<div class="col_7"></div>
<div class="col_8"></div>
<div class="col_9"></div>
<div class="col_10"></div>
<div class="col_11"></div>
<div class="col_12"></div>
  
</div>

SassMeister-input.scss

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


// Create a map containing breakpoints
// 
$breakpoints:(
  all    : 0     0,
  mobile : 0     640px, 
  tablet : 411px 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($breakpoint...){
  // Loop thru passed breakpoint keys
  @each $key, $value in $breakpoint {
    //$min:length($value>0,nth($value,1),0); // add unit conversion
    //$max:length($value>1,nth($value,2),0);
    $mq :'all '; 
    @media (min-width:map-get($breakpoints, $key)){
        $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){ 
      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 (min-width: 0 640px) { .a { hello: foo; } }
@media (min-width: 411px 960px) { .a, .c { hello: foo; }
  .c { hello: bar; }
  .c, a { hello: doh; } }
.outofscope { hello: foo; }

.outofscope { joe: jane; }

SassMeister-rendered.html

<div class="grid">
<div class="col_1"></div>
<div class="col_2"></div>
<div class="col_3"></div>
<div class="col_4"></div>
<div class="col_5"></div>
<div class="col_6"></div>
<div class="col_7"></div>
<div class="col_8"></div>
<div class="col_9"></div>
<div class="col_10"></div>
<div class="col_11"></div>
<div class="col_12"></div>
  
</div>