SCSS

by khamer

HTML

<script src="https://unpkg.com/[email protected]/src/_functions.scss"></script>
<div class="grid">test</div>

SCSS

$columns: 12;
$gutter: 30px;

///
/// You probably don't want to use this. See span().
///
/// If you insist, this returns an expression, meant for calc(), that
/// corresponds to the width of $n columns and the enclosed gutters.
///
@function grid-unit($n, $columns: $columns, $gutter: $gutter, $extra-gutters: 0) {
  @return unquote("#{$n/$columns*100%} + #{$gutter * ($n / $columns + $extra-gutters - 1)}");
}

///
/// Returns the width of $n columns of the grid and the enclosed gutters.
///
@function span($n, $columns: $columns, $gutter: $gutter) {
    @return calc(#{grid-unit($n, $columns, $gutter)});
}

///
/// Returns the width of a $n column offset on the grid, including the last
/// gutter.
///
@function left($n, $columns: $columns, $gutter: $gutter) {
    @return calc(#{grid-unit($n, $columns, $gutter, 1)});
}
@function right($n, $columns: $columns, $gutter: $gutter) {
    @return calc(#{grid-unit($n, $columns, $gutter, 1)});
}

///
/// Returns the width of $n columns of the grid along with both outer gutters.
///
@function gutter($n: 0, $columns: $columns, $gutter: $gutter) {
    @return calc(#{grid-unit($n, $columns, $gutter, 2)});
}

.grid {
  width: span(6);
  background-color: red;
}