/// Plugin: SVG Grid Image /// ====================== /// @group plugin_svg-grid /// @see susy-svg-grid

/// ## Overview /// If you want to generate svg-backgrounds /// for help visualizing and debugging your grids, /// import the SVG Grid Plugin. /// /// The plugin adds `svg-grid-colors` setting /// to your global defaults, /// which you can override in `$susy`. /// It also provides you with a new function, /// `susy-svg-grid()`, /// which will return inline svg for use in /// backgrounds or generated content. /// /// This function come with an unprefixed alias by default, /// using the `svg-grid` import. /// If you only only want prefixed versions of the API, /// import the `svg-grid/prefix` partial instead. /// /// @group plugin_svg-grid /// /// @example scss - importing the plugin /// // The full path to import Susy will depend on your setup… /// /// // unprefixed /// @import 'plugins/svg-grid'; /// /// // prefixed /// @import 'plugins/svg-grid/prefix'; /// /// @example scss - generating background grids /// .grid { /// background: susy-svg-grid() no-repeat scroll; /// }

// SVG Grid // ——– /// Return inline svg-data in to display the grid. /// /// @group plugin_svg-grid /// /// @param {Map | List} $grid [$susy] - /// Map or shorthand defining the current grid /// @param {Color | List | null} $colors [null] - /// Column color, or list of colors for column-gradient, /// used to override the global `svg-grid-colors` setting /// @param {Length | null} $offset [null] - /// Manually override the default grid-image offset, /// to account for grid edges /// /// @return {String} - /// CSS inline-data SVG string, in `url(<svg>)` format, /// for use in image or content properties /// @example scss /// .grid { /// background: susy-svg-grid() no-repeat scroll; /// } @function susy-svg-grid(

$grid: $susy,
$colors: null,
$offset: null

) {

// Grid parsing & normalizing
$grid: susy-compile($grid, $context-only: true);

// Color and gradient handling
$gradient: '';

@if (not $colors) {
  $colors: susy-get('svg-grid-colors');
}

@if length($colors) > 1 {
  $gradient: _susy-svg-gradient($colors);
  $colors: 'url(%23susy-svg-gradient)';
} @else {
  $colors: _susy-svg-color($colors);
}

// Get a default image-width
$span: (
  'span': map-get($grid, 'columns'),
  'spread': map-get($grid, 'container-spread'),
);
$span: map-merge($grid, $span);
$image-width: su-call('su-span', $span);
$image-width: if((type-of($image-width) == 'number'), $image-width, 100%);

// SVG construction
$columns: map-get($grid, 'columns');
$offset: $offset or _susy-svg-offset($grid);

$attrs: 'fill="#{$colors}" width="#{$image-width}"';
$svg: 'data:image/svg+xml,';
$svg: $svg + '%3Csvg xmlns="http://www.w3.org/2000/svg" #{$attrs} %3E';
$svg: $svg + $gradient;

@for $column from 1 through length($columns) {
  $width: susy-span(1 narrow at $column, $grid);
  $x: _susy-svg-column-position($column, $grid);

  $svg: $svg + _susy-svg-rect($x, $width, $offset);
}

@return url('#{$svg}%3C/svg%3E');

}