Using Sass `@for` and `@mixin` to build a CSS grid of 12 units

grid.css

.grid {
  max-width: 100%;
  margin: 0 auto;
  background-color: lightgrey; }
  .grid .unit-span-1,
  .grid .unit-1,
  .grid .unit-1-12 {
    width: 8.33333%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-2,
  .grid .unit-2,
  .grid .unit-2-12 {
    width: 16.66667%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-3,
  .grid .unit-3,
  .grid .unit-3-12 {
    width: 25%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-4,
  .grid .unit-4,
  .grid .unit-4-12 {
    width: 33.33333%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-5,
  .grid .unit-5,
  .grid .unit-5-12 {
    width: 41.66667%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-6,
  .grid .unit-6,
  .grid .unit-6-12 {
    width: 50%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-7,
  .grid .unit-7,
  .grid .unit-7-12 {
    width: 58.33333%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-8,
  .grid .unit-8,
  .grid .unit-8-12 {
    width: 66.66667%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-9,
  .grid .unit-9,
  .grid .unit-9-12 {
    width: 75%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-10,
  .grid .unit-10,
  .grid .unit-10-12 {
    width: 83.33333%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-11,
  .grid .unit-11,
  .grid .unit-11-12 {
    width: 91.66667%;
    float: left;
    box-sizing: border-box; }
  .grid .unit-span-12,
  .grid .unit-12,
  .grid .unit-12-12 {
    width: 100%;
    float: left;
    box-sizing: border-box; }

grid.scss

.grid {
  $grid-width: 100%;
  $unit-width: $grid-width / 12;
  
  @extend .clearfix; // if `.clearfix` exists...
  // Otherwise add your own clearfix hack to `::before` and `::after`...
  
  max-width: $grid-width;
  
  margin: 0 auto;
  background-color: lightgrey;

  @mixin unit ($units){
    width: $unit-width * $units;
    
    float:left;
    box-sizing: border-box;
  }

  @for $units from 1 through 12 {
    .unit-span-#{$units},
    .unit-#{$units},
    .unit-#{$units}-12 {
      @include unit($units);
    }
  } // END $for $units
} // END .grid