Generated by SassMeister.com.

SassMeister-input.scss

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

.mobile-foo {
  @extend %col-4-small;
}

.tablet-foo {
  @extend %col-6-medium;
}

.desktop-foo {
  @extend %col-9;
}




// Below is where the magic happens:


$columns: 12;

$mq-breakpoint-small: 767px !default;
$mq-breakpoint-medium: 768px !default;
$mq-breakpoint-large: 1280px !default;

$mq: (
  small: "only screen and (max-width: #{$mq-breakpoint-small})",
  medium: "only screen and (min-width: #{$mq-breakpoint-medium})",
  large: "only screen and (min-width: #{$mq-breakpoint-large})"
) !default;

@mixin mq($breakpoint) {
  @if $breakpoint == all { 
    @content;
  } @else {
    @media #{(map-get($mq, $breakpoint))} {
      @content;
    }
  }
}

@each $breakpoint in (small, medium, large, all) {
  @include mq($breakpoint) {
    $suffix: if($breakpoint == all, '', '-#{$breakpoint}');
    
    @for $i from 1 through $columns {
      %col-#{$i}#{$suffix} {
        width: percentage($i / $columns);
      }
    }
  }
}

SassMeister-output.css

@media only screen and (max-width: 767px) {
  .mobile-foo {
    width: 33.3333333333%;
  }
}
@media only screen and (min-width: 768px) {
  .tablet-foo {
    width: 50%;
  }
}
.desktop-foo {
  width: 75%;
}