Simple grid in Sass

sass-grid.scss

/* Your variables */
$nb-columns : 6; 
$wrap-width : 1140px; 
$column-width : 180px; 

/* Calculations */
$gutter-width : ($wrap-width - $nb-columns * $column-width) / $nb-columns; 
$column-pct : ($column-width / $wrap-width) * 100; 
$gutter-pct : ($gutter-width / $wrap-width) * 100; 

/* One single mixin */
@mixin cols($cols) { 
    width: $column-pct * $cols + $gutter-pct * ($cols - 1) + unquote('%'); 
    margin-right: $gutter-pct + unquote('%'); 
    float: left; 

    @media screen and (max-width: 400px) { 
        width: 100%; 
        margin-right: 0; 
    } 
}

@mixin container {
  width: 100%;
  max-width: $wrap-width;
  margin: 0 auto;
  /* Keep the container centered. */
  position: relative;
  left: $gutter-pct / 2 + unquote('%');
}
      
* {
  @include box-sizing(border-box);
}
      
body {
  overflow: hidden;
  text-align: center;
  @include container;
}
      
.header, .footer {
  padding: 1em;
  margin: 1em 0;
  @include cols(6);
}
.col {
  padding: 1em;
  @include cols(1);
}