Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

$ie: false;
$large-up: "(min-width: 500px)";

$margin: 10;
$columns: 10;
$class-slug: 'foo';

@mixin calculate-grid() {
    [class*="col-"] {
        [class*="col-"] {
            margin: 0 percentage($margin / 100) 0;
        }
    }

    // lets iterate through each column and create a class for it
    @for $i from 1 through $columns {

        $width: $i / ($columns/100%);

        .#{$class-slug}-#{$i} {
            width: $width - percentage($margin/100) * 2
        }

        .collapse {
            .#{$class-slug}-#{$i} {
                width: $width
            }
        }
    }
}

@if ($ie) { // I've tried $ie == true as well with no luck
        @include calculate-grid;
} @else {
    @media #{$large-up} {
        @include calculate-grid;
    }
}

SassMeister-output.css

@media (min-width: 500px) {
  [class*="col-"] [class*="col-"] {
    margin: 0 10% 0; }
  .foo-1 {
    width: -10%; }
  .collapse .foo-1 {
    width: 10%; }
  .foo-2 {
    width: 0%; }
  .collapse .foo-2 {
    width: 20%; }
  .foo-3 {
    width: 10%; }
  .collapse .foo-3 {
    width: 30%; }
  .foo-4 {
    width: 20%; }
  .collapse .foo-4 {
    width: 40%; }
  .foo-5 {
    width: 30%; }
  .collapse .foo-5 {
    width: 50%; }
  .foo-6 {
    width: 40%; }
  .collapse .foo-6 {
    width: 60%; }
  .foo-7 {
    width: 50%; }
  .collapse .foo-7 {
    width: 70%; }
  .foo-8 {
    width: 60%; }
  .collapse .foo-8 {
    width: 80%; }
  .foo-9 {
    width: 70%; }
  .collapse .foo-9 {
    width: 90%; }
  .foo-10 {
    width: 80%; }
  .collapse .foo-10 {
    width: 100%; } }