Constrained layout SMACSS style

_constrained.scss

/*===================================
=            Constrained            =
===================================*/

$constrained-width: 1170;


/* =With padding
---------------------- */

.constrained {
  max-width: #{$constrained-width}px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@for $i from 1 through 24 {
  .constrained-#{$i} {
    @extend .constrained;
    max-width: #{$constrained-width/24*$i}px;
  }
}

/* =No padding
---------------------- */

.constrained-nopadding {
  max-width: #{$constrained-width}px;
  margin-left: auto;
  margin-right: auto;
}

@for $i from 1 through 24 {
  .constrained-nopadding-#{$i} {
    @extend .constrained-nopadding;
    max-width: #{$constrained-width/24*$i}px;
  }
}