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
// The full path to import Susy will depend on your setup…
// unprefixed
@import 'plugins/svg-grid';
// prefixed
@import 'plugins/svg-grid/prefix';
.grid {
background: susy-svg-grid() no-repeat scroll;
}
.grid {
background: susy-svg-grid() no-repeat scroll;
}
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
.grid {
background: susy-svg-grid() no-repeat scroll;
}
.grid {
background: susy-svg-grid() no-repeat scroll;
}