1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
/// 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');
}
|
