@charset “UTF-8”; /// Creates a series of guide lines using the ‘background-image` property on a /// grid container to visualise the columns and gutters of the grid. /// /// @group features /// /// @name Grid visual /// /// @argument {color} $color /// The color of the guide lines created. /// /// @argument {map} $grid [$neat-grid] /// The grid used to determine the guides /// /// @example scss /// .element { /// @include grid-visual; /// } /// /// @example css /// .element { /// background-image: repeating-linear-gradient( … ) ; /// }
@mixin grid-visual($color: null, $grid: $neat-grid) {
@if not $color { $color: _retrieve-neat-setting($grid, color); } $_grid-columns: _retrieve-neat-setting($grid, columns); $_grid-gutter: _retrieve-neat-setting($grid, gutter); $_grid-visual-column: "#{_neat-column-width($grid, 1)} + #{$_grid-gutter}"; $_grid-visual: transparent, transparent $_grid-gutter, $color $_grid-gutter, $color calc(#{$_grid-visual-column}), ; background-image: repeating-linear-gradient(to right, $_grid-visual);
}