explaining grid in scss code

grid.scss

//VARIABLES
$xs: xs;
$sm: sm;
$md: md;
$lg: lg;
$xl: xl;

$breakpoint-xs: 575px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

$class-col: col;
$gutter-width: 1%;
$column-width: (88%/12);

//MAIN
@mixin grid-unit-normal($span) {
  float: left;
  margin-right: $gutter-width;
  width: ($column-width * $span) + ($gutter-width * ($span - 1));
}

@mixin grid-unit($span) {
  float: left;
  margin-right: $gutter-width;
  width: ($column-width * $span) + ($gutter-width * ($span - 1)) !important;
}

@for $i from 1 through 12 {
  .#{$class-col}-#{$i} {
    @include grid-unit-normal($i);
  }
}

@for $i from 1 through 12 {
  @media screen and (max-width: $breakpoint-xs) {
	.#{$class-col}-#{$xs}-#{$i} {
      @include grid-unit($i);
	}
 }
}

@for $i from 1 through 12 {
  @media screen and (min-width: $breakpoint-sm) {
	.#{$class-col}-#{$sm}-#{$i} {
      @include grid-unit($i);
	}
 }
}

@for $i from 1 through 12 {
  @media screen and (min-width: $breakpoint-md) {
	.#{$class-col}-#{$md}-#{$i} {
      @include grid-unit($i);
	}
 }
}

@for $i from 1 through 12 {
  @media screen and (min-width: $breakpoint-lg) {
	.#{$class-col}-#{$lg}-#{$i} {
      @include grid-unit($i);
	}
 }
}

@for $i from 1 through 12 {
  @media screen and (min-width: $breakpoint-xl) {
	.#{$class-col}-#{$xl}-#{$i} {
      @include grid-unit($i);
	}
 }
}