Less Grid Mixins

gistfile1.txt

/**
 * Creates a grid with static gutters.
 *
 * @mixin grid--static-gutter
 * @param {Number} columns  The number of columns in your grid.
 * @param {Number} gutter   Gutters, set in pixels regardless of any unit passed.
 */
.grid--static-gutter(@columns: 2, @gutter) {
  @width: 100 / @columns;
  @marginRight: @gutter * (@columns - 1) / @columns;
  
  float: left;
  margin-bottom: @gutter * 1px;
  margin-right: @gutter * 1px;
  width: -webkit-calc((@width * 1%) ~"-" (@marginRight * 1px));
  width:         calc((@width * 1%) ~"-" (@marginRight * 1px));
  
  &:nth-of-type(@{columns}n) { margin-right: 0; }
}

/**
 * Creates a grid with dynamic gutters.
 *
 * @mixin grid--dynamic-gutter
 * @param {Number} columns  The number of columns in your grid.
 * @param {Number} gutter   Gutters, set in percentage regardless of any unit passed.
 */
.grid--dynamic-gutter(@columns, @gutter) {
  @width: 100 / @columns - ((@columns - 1) * @gutter) / @columns;

  float: left;
  margin-bottom: @gutter * 1%;
  margin-right: @gutter * 1%;
  width: @width * 1%;

  &:nth-of-type(@{columns}n) { margin-right: 0; }
}