Flexbox and calc columns with gutters

gistfile1.css

.col-0 {
  flex: 0 0 calc(100% - 0rem);
}

.col-1 {
  flex: 0 0 calc(91.66667% - 0.5rem);
}

.col-2 {
  flex: 0 0 calc(83.33333% - 0.66667rem);
}

.col-3 {
  flex: 0 0 calc(75% - 0.75rem);
}

.col-4 {
  flex: 0 0 calc(66.66667% - 0.8rem);
}

.col-5 {
  flex: 0 0 calc(58.33333% - 0.83333rem);
}

.col-6 {
  flex: 0 0 calc(50% - 0.85714rem);
}

.col-7 {
  flex: 0 0 calc(41.66667% - 0.875rem);
}

.col-8 {
  flex: 0 0 calc(33.33333% - 0.88889rem);
}

.col-9 {
  flex: 0 0 calc(25% - 0.9rem);
}

.col-10 {
  flex: 0 0 calc(16.66667% - 0.90909rem);
}

.col-11 {
  flex: 0 0 calc(8.33333% - 0.91667rem);
}

.col-12 {
  flex: 0 0 calc(0% - 0.92308rem);
}

gistfile1.scss

$brandbg: #FF7070;
$lightbg: #FFF;
$brandbg--light: #FFD4D4;
$darkbg: #555;
$u: rem;
$horz-spacing: 1;
$vert-spacing: 1.75rem;
$grid-gutter: $horz-spacing+$u;
$m: $horz-spacing;
$cols: 12;

@for $i from 0 through $cols {
	.col-#{$i} {
	  $col: percentage($i/$cols); // Iterate through the number of columns.
	  $col-rev: 100%/$cols*($cols)-$col; // Reverse the percentage values.
	  $gutter-count: $i + 1; // Reset the count to 1, otherwise nothing works.
	  $f1: (($gutter-count)-1)/($gutter-count)*$m; // Divide the number of columns, minus 1, and divide by the number of columns.
		flex: 0 0 calc(#{$col-rev} - #{$f1+$u}); // Add the calculations to flex-basis via calc().
	}
}