static/css/util/_grid.scss

/**
 * @param {string} $selector
 * @param {integer} $cols-span
 * @param {px} $spacing (optional)
 * @param {px} $grid-width (optional)
 * @param {integer} $cols-count (optional)
 * @param {boolean} $is-fluid (optional)
*/
@mixin grid(
        $selector,
        $cols-span,
        $spacing: $grid-spacing,
        $grid-width: $grid-width,
        $cols-count: 12,
        $is-fluid: false) {
    $span: ($cols-count / $cols-span);

    @include grid-row($spacing);

    #{unquote($selector)} {
        @include grid-col;
        @include grid-span($span, $spacing);
    }
}


/**
 * @param {integer} $grid-spacing (optional)
 */
@mixin grid-row($grid-spacing: $grid-spacing)
{
    font-size: 0;
    margin-right: -$grid-spacing;
}


/**
 *
 * @param {integer} $span
 * @param {px} $spacing (optional)
 * @param {px} $grid-width (optional)
 * @param {integer} $cols-count (optional)
 * @param {boolean} $grid-is-fluid (optional)
*/
@mixin grid-span(
        $span,
        $spacing: $grid-spacing,
        $grid-width: $grid-width,
        $cols-count: 12,
        $is-fluid: false) {

    $is-fluid: $is-fluid;
    $unit-width: 0 !default;
    $final-unit-width: auto !default;

    @if ($is-fluid) {
        $grid-width: 100%;
        $unit-width: ($span * $grid-width) / $cols-count;
        $final-unit-width: $unit-width;
        margin-right: 0;
        padding-right: $grid-spacing;
    }
    @else {
        $unit-width: ($span * ($grid-width + $spacing)) / $cols-count;
        $final-unit-width: ($unit-width - $spacing);
        margin-right: $spacing;
    }

    width: $final-unit-width;
}


/**
 * Grid column
 * @param {px} $font-size (optional)
*/
@mixin grid-col($font-size: $grid-base-font-size)
{
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    font-size: 14px;
}