Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="row">
  <div class="col-2 column">
    <div style="background: red; height: 50px;"></div>
  </div>
  <div class="col-7 column">
    <div style="background: red; height: 50px;"></div>
  </div>
  <div class="col-3 column">
    <div style="background: red; height: 50px;"></div>
  </div>
</div>

SassMeister-input.scss

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

//=============================
//	[Grid functions & mixins]
//=============================

// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
    $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
    $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
    @return percentage($width / $container-width);
}

// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
    $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
    @return percentage($gutter / $container-width);
}

// Grid settings
  $fg-column: 60px;
  $fg-gutter: 25px;
  $fg-max-columns: 12;

//=============================
//	[Grid classes]
//=============================

.row {
    display: block;
    width: 100%;
    overflow: hidden;
    clear: both;
}

.column {
    float: left;
}

// *** Build grid ***
@for $i from 1 through $fg-max-columns {
	.col-#{$i} {
		width: flex-grid($i);
		// reset padding for last column
		@if $i == $fg-max-columns {
			padding-left: 0;
		} @else {
			padding-left: flex-gutter();
		}
	}
}

// reset padding for first column
.row {
	.column:first-child {
		padding-left: 0;
	}
}

// *** No gutter ***
.row.no-gutter {
  @for $i from 1 through $fg-max-columns {
    .col-#{$i} {
      width: flex-grid($i) + (flex-gutter() * (($fg-max-columns / $i) - 1) / ($fg-max-columns / $i));
      padding-left: 0;
    }
  }
}

SassMeister-output.css

.row {
  display: block;
  width: 100%;
  overflow: hidden;
  clear: both; }

.column {
  float: left; }

.col-1 {
  width: 6.03015%;
  padding-left: 2.51256%; }

.col-2 {
  width: 14.57286%;
  padding-left: 2.51256%; }

.col-3 {
  width: 23.11558%;
  padding-left: 2.51256%; }

.col-4 {
  width: 31.65829%;
  padding-left: 2.51256%; }

.col-5 {
  width: 40.20101%;
  padding-left: 2.51256%; }

.col-6 {
  width: 48.74372%;
  padding-left: 2.51256%; }

.col-7 {
  width: 57.28643%;
  padding-left: 2.51256%; }

.col-8 {
  width: 65.82915%;
  padding-left: 2.51256%; }

.col-9 {
  width: 74.37186%;
  padding-left: 2.51256%; }

.col-10 {
  width: 82.91457%;
  padding-left: 2.51256%; }

.col-11 {
  width: 91.45729%;
  padding-left: 2.51256%; }

.col-12 {
  width: 100%;
  padding-left: 0; }

.row .column:first-child {
  padding-left: 0; }

.row.no-gutter .col-1 {
  width: 8.33333%;
  padding-left: 0; }
.row.no-gutter .col-2 {
  width: 16.66667%;
  padding-left: 0; }
.row.no-gutter .col-3 {
  width: 25%;
  padding-left: 0; }
.row.no-gutter .col-4 {
  width: 33.33333%;
  padding-left: 0; }
.row.no-gutter .col-5 {
  width: 41.66667%;
  padding-left: 0; }
.row.no-gutter .col-6 {
  width: 50%;
  padding-left: 0; }
.row.no-gutter .col-7 {
  width: 58.33333%;
  padding-left: 0; }
.row.no-gutter .col-8 {
  width: 66.66667%;
  padding-left: 0; }
.row.no-gutter .col-9 {
  width: 75%;
  padding-left: 0; }
.row.no-gutter .col-10 {
  width: 83.33333%;
  padding-left: 0; }
.row.no-gutter .col-11 {
  width: 91.66667%;
  padding-left: 0; }
.row.no-gutter .col-12 {
  width: 100%;
  padding-left: 0; }

SassMeister-rendered.html

<div class="row">
  <div class="col-2 column">
    <div style="background: red; height: 50px;"></div>
  </div>
  <div class="col-7 column">
    <div style="background: red; height: 50px;"></div>
  </div>
  <div class="col-3 column">
    <div style="background: red; height: 50px;"></div>
  </div>
</div>