Plugin: SVG Grid Image

related

@function 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.

Examples

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';
scss generating background grids
.grid {
  background: susy-svg-grid() no-repeat scroll;
}
css compiled
.grid {
  background: susy-svg-grid() no-repeat scroll;
}

@function susy-svg-grid()

aliased as svg-grid()

Description

Return inline svg-data in to display the grid.

Parameters & Return

$grid: $susy (Map | List)

Map or shorthand defining the current grid

$colors: null (Color | List | null)

Column color, or list of colors for column-gradient, used to override the global svg-grid-colors setting

$offset: null (Length | 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;
}
css compiled
.grid {
  background: susy-svg-grid() no-repeat scroll;
}

requires

@function susy-compile()

@function susy-get()

@function _susy-svg-gradient() [private]

@function _susy-svg-color() [private]

@function su-call()

@function _susy-svg-offset() [private]

@function susy-span()

@function _susy-svg-column-position() [private]

@function _susy-svg-rect() [private]

used by

@function svg-grid()