SASS thumbnail-grid

thumbnail-grid.scss

/**
 * @mixin thumbnail-grid($thumbnail-grid-columns, $thumbnail-grid-item-width, $thumbnail-grid-item-height, $thumbnail-grid-item-hspace, $thumbnail-grid-item-vspace)
 *
 * Apply to a selector to its style children elements as a thumbnail grid
 *
 * @param: $thumbnail-grid-columns
 *   number of columns for the thumbnail grid
 * @param: $thumbnail-grid-item-width
 *   with of each grid element
 * @param: $thumbnail-grid-item-height
 *   height of each grid element
 * @param: $thumbnail-grid-item-hspace
 *   space between rows (margin-right)
 * @param: $thumbnail-grid-item-vspace
 *   space between column (margin-bottom)
 *
 */
@mixin thumbnail-grid($thumbnail-grid-columns, $thumbnail-grid-item-width, $thumbnail-grid-item-height, $thumbnail-grid-item-hspace, $thumbnail-grid-item-vspace) {
  & > * {
    float: left;
    overflow: hidden;
    position: relative;
    width: $thumbnail-grid-item-width;
    height: $thumbnail-grid-item-height;
    margin: 0 $thumbnail-grid-item-hspace $thumbnail-grid-item-vspace 0;
  }
  & > *:nth-child(#{$thumbnail-grid-columns}n+1),
  & > .first {
    clear: left;
  }
  & > *:nth-child(#{$thumbnail-grid-columns}n),
  & > .last {
    margin-right: 0;
    clear: right;
  }
}