this_does_not_work.scss

@mixin clearfix {
  *zoom: 1;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin generate-grid($cols, $width) {
  %grid-base {
    float: left;
    @include clearfix;
  }
  @for $i from 1 through $cols {
    .col-#{$i} {
      @extend %grid-base;
      width: $width * $i / $cols; 
    }
  }
}

@media (all) and (min-width: 480px) {
  @include generate-grid(12, 720px);
}

@media (all) and (min-width: 800px) {
  @include generate-grid(24, 960px);
}

this_works.scss

@mixin clearfix {
  *zoom: 1;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin generate-grid($cols, $width) {
  $base: unique-id(); 
  %#{$base} {
    float: left;
    @include clearfix;
  }
  @for $i from 1 through $cols {
    .col-#{$i} {
      @extend %#{$base};
      width: $width * $i / $cols; 
    }
  }
}

@media (all) and (min-width: 480px) {
  @include generate-grid(12, 720px);
}

@media (all) and (min-width: 800px) {
  @include generate-grid(24, 960px);
}