SASS thumbnail-grid lists

thumbnail-grid-lists.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 <ul> to style children <li> elements as a thumbnail grid
 *
 * @param: $thumbnail-grid-columns
 *   number of columns for the thumbnail grid
 * @param: $thumbnail-grid-item-width
 *   with of <li> element
 * @param: $thumbnail-grid-item-height
 *   height of <li> 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) {
  & > li {
    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;
  }
  & > li:nth-child(#{$thumbnail-grid-columns}n+1) {
    clear: left;
  }
  & > li:nth-child(#{$thumbnail-grid-columns}n) {
    margin-right: 0;
    clear: right;
  }
}