susy 2.2.14 → 3.0.0.alpha.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/{docs/changelog.rst → CHANGELOG.md} +0 -34
- data/README.md +135 -10
- data/VERSION +1 -1
- data/sass/_prefix.scss +10 -0
- data/sass/_susy.scss +4 -3
- data/sass/susy/_api.scss +134 -0
- data/sass/susy/_grids.scss +192 -0
- data/sass/susy/_parser.scss +284 -0
- data/sass/susy/_settings.scss +120 -0
- data/sass/susy/_unprefix.scss +53 -0
- data/sass/susy/_validation.scss +132 -0
- metadata +26 -75
- data/sass/_su.scss +0 -4
- data/sass/_susyone.scss +0 -4
- data/sass/susy/_su.scss +0 -7
- data/sass/susy/language/_susy.scss +0 -24
- data/sass/susy/language/_susyone.scss +0 -13
- data/sass/susy/language/susy/_background.scss +0 -385
- data/sass/susy/language/susy/_bleed.scss +0 -200
- data/sass/susy/language/susy/_box-sizing.scss +0 -47
- data/sass/susy/language/susy/_breakpoint-plugin.scss +0 -185
- data/sass/susy/language/susy/_container.scss +0 -81
- data/sass/susy/language/susy/_context.scss +0 -36
- data/sass/susy/language/susy/_gallery.scss +0 -94
- data/sass/susy/language/susy/_grids.scss +0 -64
- data/sass/susy/language/susy/_gutters.scss +0 -154
- data/sass/susy/language/susy/_isolate.scss +0 -77
- data/sass/susy/language/susy/_margins.scss +0 -94
- data/sass/susy/language/susy/_padding.scss +0 -74
- data/sass/susy/language/susy/_rows.scss +0 -138
- data/sass/susy/language/susy/_settings.scss +0 -216
- data/sass/susy/language/susy/_span.scss +0 -163
- data/sass/susy/language/susy/_validation.scss +0 -16
- data/sass/susy/language/susyone/_background.scss +0 -18
- data/sass/susy/language/susyone/_functions.scss +0 -377
- data/sass/susy/language/susyone/_grid.scss +0 -312
- data/sass/susy/language/susyone/_isolation.scss +0 -51
- data/sass/susy/language/susyone/_margin.scss +0 -93
- data/sass/susy/language/susyone/_media.scss +0 -105
- data/sass/susy/language/susyone/_padding.scss +0 -92
- data/sass/susy/language/susyone/_settings.scss +0 -60
- data/sass/susy/output/_float.scss +0 -9
- data/sass/susy/output/_shared.scss +0 -15
- data/sass/susy/output/_support.scss +0 -9
- data/sass/susy/output/float/_container.scss +0 -16
- data/sass/susy/output/float/_end.scss +0 -40
- data/sass/susy/output/float/_isolate.scss +0 -22
- data/sass/susy/output/float/_span.scss +0 -35
- data/sass/susy/output/shared/_background.scss +0 -26
- data/sass/susy/output/shared/_container.scss +0 -21
- data/sass/susy/output/shared/_direction.scss +0 -42
- data/sass/susy/output/shared/_inspect.scss +0 -25
- data/sass/susy/output/shared/_margins.scss +0 -23
- data/sass/susy/output/shared/_output.scss +0 -14
- data/sass/susy/output/shared/_padding.scss +0 -23
- data/sass/susy/output/support/_background.scss +0 -58
- data/sass/susy/output/support/_box-sizing.scss +0 -19
- data/sass/susy/output/support/_clearfix.scss +0 -18
- data/sass/susy/output/support/_prefix.scss +0 -19
- data/sass/susy/output/support/_rem.scss +0 -22
- data/sass/susy/output/support/_support.scss +0 -95
- data/sass/susy/su/_grid.scss +0 -103
- data/sass/susy/su/_settings.scss +0 -73
- data/sass/susy/su/_utilities.scss +0 -111
- data/sass/susy/su/_validation.scss +0 -57
- data/templates/project/_grids.scss +0 -9
- data/templates/project/manifest.rb +0 -15
- data/templates/project/style.scss +0 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fa2aa38b4ee8f4a92e3d6cecb470ebcdde3dbb29
|
4
|
+
data.tar.gz: 74d57ae39653cb41f6d13d667b9205f0163eef35
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2b2b113cad8db26b6f4b10a73893f15339dfcddb4a2f35bfb36774faa85f46a294ee0667d271d75c56fdff104d085b6f98e352c8a5b3e4a46e3ae7e841741a97
|
7
|
+
data.tar.gz: eb5cb812bcc15d7fbf1eb51d3d0246f2ab583e5ed32a155f4fb32b301f216afdf288875b7981c60538dec5806e3fd06a26cd0106e76249853999ccfbd3c99709
|
@@ -1,40 +1,6 @@
|
|
1
1
|
Changelog
|
2
2
|
=========
|
3
3
|
|
4
|
-
2.2.13 - Apr 10 2018
|
5
|
-
--------------------
|
6
|
-
|
7
|
-
- Support Sass 3.5+ `get-function` requirements.
|
8
|
-
- Doc updates & typo fixes.
|
9
|
-
|
10
|
-
|
11
|
-
2.2.12 - Jan 25 2016
|
12
|
-
--------------------
|
13
|
-
|
14
|
-
- Fix bug in validation-errors.
|
15
|
-
|
16
|
-
|
17
|
-
2.2.11 - Jan 15 2016
|
18
|
-
--------------------
|
19
|
-
|
20
|
-
- Fix bug with `susy-inspect`.
|
21
|
-
|
22
|
-
|
23
|
-
2.2.10 - Jan 7 2016
|
24
|
-
-------------------
|
25
|
-
|
26
|
-
- Add `$pixel-values-only` setting to SusyOne,
|
27
|
-
for turning off Compass `rem` support.
|
28
|
-
|
29
|
-
|
30
|
-
2.2.6 - Sep 1 2015
|
31
|
-
------------------
|
32
|
-
|
33
|
-
- Fix a bug with overlay grids.
|
34
|
-
- Fix a bug with 0-width split gutters.
|
35
|
-
- Other small bug fixes.
|
36
|
-
|
37
|
-
|
38
4
|
2.2.5 - May 14 2015
|
39
5
|
-------------------
|
40
6
|
|
data/README.md
CHANGED
@@ -1,21 +1,146 @@
|
|
1
1
|
Power Tools For The Web
|
2
2
|
=======================
|
3
3
|
|
4
|
-
[![Build Status](https://travis-ci.org/oddbird/susy.png?branch=
|
4
|
+
[![Build Status](https://travis-ci.org/oddbird/susy.png?branch=threeish)](https://travis-ci.org/oddbird/susy)
|
5
5
|
|
6
6
|
Susy is an agnostic set of tools
|
7
7
|
for creating powerful, custom layouts.
|
8
|
-
We
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
it's all up to you.
|
8
|
+
We didn't want another grid system
|
9
|
+
full of rules and restrictions —
|
10
|
+
we wanted a power tool
|
11
|
+
for building our own damn systems.
|
13
12
|
|
14
|
-
|
15
|
-
|
16
|
-
|
13
|
+
Do It Yourself.
|
14
|
+
Your Markup,
|
15
|
+
Your Layout —
|
16
|
+
*Our Math*
|
17
|
+
|
18
|
+
|
19
|
+
Getting Started
|
20
|
+
---------------
|
21
|
+
|
22
|
+
Susy v3 is trimmed down to it's most basic components —
|
23
|
+
functions that can be used to build any grid system.
|
24
|
+
|
25
|
+
There are four global settings to understand,
|
26
|
+
and two of them are identical:
|
27
|
+
|
28
|
+
|
29
|
+
### Columns
|
30
|
+
|
31
|
+
The `columns` setting describes the columns in your grid.
|
32
|
+
The most basic syntax uses a list of numbers
|
33
|
+
to describe the relative size of each column.
|
34
|
+
|
35
|
+
```scss
|
36
|
+
// five equal columns
|
37
|
+
$symmetrical: (1 1 1 1 1);
|
38
|
+
|
39
|
+
// six fibonacci columns
|
40
|
+
$asymmetrical: (1 1 2 3 5 8);
|
41
|
+
```
|
42
|
+
|
43
|
+
If you want static grids,
|
44
|
+
you can add units to the numbers —
|
45
|
+
as long as all the units are comparable.
|
46
|
+
|
47
|
+
```scss
|
48
|
+
// five equal static columns
|
49
|
+
$symmetrical: (120px 120px 120px 120px 120px);
|
50
|
+
|
51
|
+
// six not-fibonacci static columns
|
52
|
+
$asymmetrical: (1in 1cm 2pt 3mm 5in 8cm);
|
53
|
+
```
|
54
|
+
|
55
|
+
That can get repetative
|
56
|
+
when you are working with symmetrical grids,
|
57
|
+
so we've provided a symmetrical shorthand.
|
58
|
+
|
59
|
+
```scss
|
60
|
+
// five equal fluid columns (shorthand)
|
61
|
+
$fluid: 5;
|
62
|
+
|
63
|
+
// five equal static columns (shorthand)
|
64
|
+
$static: 5 x 120px;
|
65
|
+
```
|
66
|
+
|
67
|
+
That static-symmetrical shorthand
|
68
|
+
is technically a list.
|
69
|
+
The first value is a unitless number,
|
70
|
+
representing the number of columns in the grid.
|
71
|
+
The second value is the letter "x"
|
72
|
+
(not a star or times symbol).
|
73
|
+
The third value is the static width of your columns.
|
74
|
+
|
75
|
+
|
76
|
+
### Gutters
|
77
|
+
|
78
|
+
The `gutters` setting describes the space between
|
79
|
+
(and sometimes around)
|
80
|
+
your columns.
|
81
|
+
It is always defined in units
|
82
|
+
comparable to the rest of your grid.
|
83
|
+
|
84
|
+
```scss
|
85
|
+
// fluid 4-column grid, with gutters 1/4 the size of a column
|
86
|
+
$columns: (1 1 1 1);
|
87
|
+
$gutters: 0.25;
|
88
|
+
|
89
|
+
// Static em-based grid, with 0.25em gutters
|
90
|
+
$columns: (1em 1em 2em 3em 5em 8em)
|
91
|
+
$gutters: 0.25em;
|
92
|
+
```
|
93
|
+
|
94
|
+
There is a special case
|
95
|
+
allowing you to use static gutters in a fluid grid,
|
96
|
+
but that's too advanced for a quick-start guide.
|
97
|
+
|
98
|
+
|
99
|
+
### Spread & Container-Spread
|
100
|
+
|
101
|
+
The concept of `spread`
|
102
|
+
helps us describe what gutters to include
|
103
|
+
in a grid span or container.
|
104
|
+
There are three options:
|
105
|
+
`narrow`, `wide`, and `wider`.
|
106
|
+
|
107
|
+
Imagine a four-column grid.
|
108
|
+
How many gutters are in that grid?
|
109
|
+
|
110
|
+
- The most common answer is `3`.
|
111
|
+
Gutters only exist between the columns —
|
112
|
+
`c1 (g1) c2 (g2) c3 (g3) c4`.
|
113
|
+
We call that option `narrow`,
|
114
|
+
and it is the default value for both
|
115
|
+
spans and containers.
|
116
|
+
|
117
|
+
- The other common answer is `5`,
|
118
|
+
if we want to include gutters on the outside edges —
|
119
|
+
`(g1) c1 (g2) c2 (g3) c3 (g4) c4 (g5)`.
|
120
|
+
We call that option `wider`.
|
121
|
+
|
122
|
+
- Less commonly,
|
123
|
+
you might want only one edge gutter
|
124
|
+
either before or after —
|
125
|
+
`c1 (g1) c2 (g2) c3 (g3) c4 (g4)` —
|
126
|
+
leaving your with `4` gutters.
|
127
|
+
We call that `wide`.
|
128
|
+
|
129
|
+
Spread and container-spread work in the same way,
|
130
|
+
but one applies to a span,
|
131
|
+
and the other applies to the parent context
|
132
|
+
when calculating relative widths.
|
133
|
+
If you are using static grids,
|
134
|
+
the `container-spread` isn't used.
|
135
|
+
|
136
|
+
In most cases,
|
137
|
+
you can set the default spread for a project,
|
138
|
+
and never look back.
|
139
|
+
Sometimes,
|
140
|
+
when you are pushing and pulling
|
141
|
+
elements around on the grid,
|
142
|
+
it is helpful to add and remove gutters on the fly.
|
17
143
|
|
18
|
-
Your markup, your layout | *our math*
|
19
144
|
|
20
145
|
Resources
|
21
146
|
---------
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
3.0.0.alpha.0
|
data/sass/_prefix.scss
ADDED
data/sass/_susy.scss
CHANGED
data/sass/susy/_api.scss
ADDED
@@ -0,0 +1,134 @@
|
|
1
|
+
// Grids
|
2
|
+
// =====
|
3
|
+
// - susy-span [function]
|
4
|
+
// - susy-gutter [function]
|
5
|
+
// - susy-slice [function]
|
6
|
+
|
7
|
+
|
8
|
+
// Susy Span
|
9
|
+
// ---------
|
10
|
+
/// This is the primary function in Susy —
|
11
|
+
/// used to return the width of any grid-span —
|
12
|
+
/// such as the `width` property of grid elements,
|
13
|
+
/// or `margin` and `padding`
|
14
|
+
/// to push, pull, and pad your elements
|
15
|
+
/// (un-prefixed alias `span()` is available
|
16
|
+
/// unless you import `susy/prefix` explicitly)
|
17
|
+
///
|
18
|
+
/// @group api
|
19
|
+
///
|
20
|
+
/// @param {List} $span -
|
21
|
+
/// Shorthand expression to define the width of the span —
|
22
|
+
/// containing a unitless column-span;
|
23
|
+
/// 'of $n' for available grid columns [optional];
|
24
|
+
/// 'at $n', 'first', or 'last' for location on asymmetrical grids;
|
25
|
+
/// and 'narrow', 'wide', or 'wider' for
|
26
|
+
/// optionally spreading over adjacent gutters
|
27
|
+
/// with either the `span` or `columns` value
|
28
|
+
/// @param {Map} $config [()] -
|
29
|
+
/// Optional map of Susy grid configuration settings
|
30
|
+
///
|
31
|
+
/// @return {Length} -
|
32
|
+
/// Fluid `%` length when no `column-width` is given,
|
33
|
+
/// or a static length in the same units as `column-width`
|
34
|
+
///
|
35
|
+
/// @example scss - Span half the grid
|
36
|
+
/// .foo
|
37
|
+
/// width: susy-span(6 of 12);
|
38
|
+
/// }
|
39
|
+
///
|
40
|
+
/// @example scss - Span a specific segment of asymmetrical grid
|
41
|
+
/// .foo {
|
42
|
+
/// width: susy-span(3 at 3 of (1 2 3 5 8));
|
43
|
+
/// }
|
44
|
+
@function susy-span(
|
45
|
+
$span,
|
46
|
+
$config: ()
|
47
|
+
) {
|
48
|
+
$input: susy-settings($config, susy-parse($span));
|
49
|
+
$normal: susy-normalize($input);
|
50
|
+
|
51
|
+
@return su-span($normal...);
|
52
|
+
}
|
53
|
+
|
54
|
+
|
55
|
+
// Susy Gutter
|
56
|
+
// -----------
|
57
|
+
/// Return the width of a single gutter
|
58
|
+
/// in your current grid context
|
59
|
+
/// (un-prefixed alias `gutter()` is available
|
60
|
+
/// unless you import `susy/prefix` explicitly)
|
61
|
+
///
|
62
|
+
/// @group api
|
63
|
+
///
|
64
|
+
/// @param {Number | List} $context [null] -
|
65
|
+
/// Optional columns in a nested context
|
66
|
+
/// @param {Map} $config [()] -
|
67
|
+
/// Optional map of Susy grid configuration settings
|
68
|
+
///
|
69
|
+
/// @return {Length} -
|
70
|
+
/// Width of a gutter as `%` of current context,
|
71
|
+
/// or in the units defined by `column-width` when available
|
72
|
+
///
|
73
|
+
/// @example scss - Add gutters before or after an element
|
74
|
+
/// .foo {
|
75
|
+
/// margin-left: gutter();
|
76
|
+
/// }
|
77
|
+
@function susy-gutter(
|
78
|
+
$context: susy-get('columns'),
|
79
|
+
$config: ()
|
80
|
+
) {
|
81
|
+
$args: ('columns', 'gutters', 'container-spread');
|
82
|
+
$input: susy-settings($config, ('columns': $context));
|
83
|
+
$normal: susy-normalize($input);
|
84
|
+
$output: ();
|
85
|
+
|
86
|
+
@each $setting in $args {
|
87
|
+
$output: map-merge($output, ($setting: map-get($normal, $setting)));
|
88
|
+
}
|
89
|
+
|
90
|
+
@return su-gutter($output...);
|
91
|
+
}
|
92
|
+
|
93
|
+
|
94
|
+
// Susy Slice
|
95
|
+
// ----------
|
96
|
+
/// Return a sub-slice of asymmetrical columns to use
|
97
|
+
/// for a nested context
|
98
|
+
/// (un-prefixed alias `slice()` is available
|
99
|
+
/// unless you import `susy/prefix` explicitly)
|
100
|
+
///
|
101
|
+
/// @group api
|
102
|
+
///
|
103
|
+
/// @param {List} $span -
|
104
|
+
/// Shorthand expression to define the subset span —
|
105
|
+
/// containing a unitless column-count;
|
106
|
+
/// 'of $n' for available grid columns [optional];
|
107
|
+
/// 'at $n', 'first', or 'last' for location on asymmetrical grids;
|
108
|
+
/// and 'narrow', 'wide', or 'wider' for
|
109
|
+
/// optionally spreading over adjacent gutters
|
110
|
+
/// with either the `span` or `columns` value
|
111
|
+
///
|
112
|
+
/// @param {Map} $config [()] -
|
113
|
+
/// Optional map of Susy grid configuration settings
|
114
|
+
///
|
115
|
+
/// @return {List} -
|
116
|
+
/// Subset list of columns for use for a nested context
|
117
|
+
///
|
118
|
+
/// @example scss - Return a nested segment of asymmetrical grid
|
119
|
+
/// $context: susy-slice(3 at 3 of (1 2 3 5 8)); // returns `(3 5 8)`
|
120
|
+
@function susy-slice(
|
121
|
+
$span,
|
122
|
+
$config: ()
|
123
|
+
) {
|
124
|
+
$args: ('span', 'columns', 'location');
|
125
|
+
$input: susy-settings($config, susy-parse($span));
|
126
|
+
$normal: susy-normalize($input);
|
127
|
+
$output: ();
|
128
|
+
|
129
|
+
@each $setting in $args {
|
130
|
+
$output: map-merge($output, ($setting: map-get($normal, $setting)));
|
131
|
+
}
|
132
|
+
|
133
|
+
@return su-slice($output...);
|
134
|
+
}
|
@@ -0,0 +1,192 @@
|
|
1
|
+
// Grids
|
2
|
+
// =====
|
3
|
+
// - su-span [function]
|
4
|
+
// - su-gutter [function]
|
5
|
+
// - su-sum [function]
|
6
|
+
// - su-slice [function]
|
7
|
+
|
8
|
+
|
9
|
+
// Su Span
|
10
|
+
// -------
|
11
|
+
/// Return a usable span width
|
12
|
+
/// in either relative or static units
|
13
|
+
///
|
14
|
+
/// @group math
|
15
|
+
///
|
16
|
+
/// @param {Number | List} $span -
|
17
|
+
/// Number or list of grid columns to span
|
18
|
+
/// @param {List} $columns -
|
19
|
+
/// List of columns available
|
20
|
+
/// @param {Number} $gutters -
|
21
|
+
/// Width of a gutter in column-comparable units
|
22
|
+
/// @param {0 | 1 | -1} $spread -
|
23
|
+
/// Number of gutters spanned,
|
24
|
+
/// relative to `span` count
|
25
|
+
/// @param {0 | 1 | -1} $container-spread [$spread] -
|
26
|
+
/// Number of gutters spanned,
|
27
|
+
/// relative to `columns` count
|
28
|
+
/// @param {Integer} $location [1] -
|
29
|
+
/// Optional position of sub-span among full set of columns
|
30
|
+
///
|
31
|
+
/// @return {Length} -
|
32
|
+
/// Relative or static length of a span on the grid
|
33
|
+
@function su-span(
|
34
|
+
$span,
|
35
|
+
$columns,
|
36
|
+
$gutters,
|
37
|
+
$spread,
|
38
|
+
$container-spread: $spread,
|
39
|
+
$location: 1
|
40
|
+
) {
|
41
|
+
$columns: su-valid-columns($columns);
|
42
|
+
$gutters: su-valid-gutters($gutters, $columns);
|
43
|
+
$spread: su-valid-spread($spread);
|
44
|
+
|
45
|
+
@if (type-of($span) == 'number') {
|
46
|
+
@if unitless($span) {
|
47
|
+
$location: su-valid-location($span, $location, $columns);
|
48
|
+
$span: su-slice($span, $columns, $location, $validate: false);
|
49
|
+
} @else {
|
50
|
+
// if you give us e.g. 3em, fine, we'll give it right back
|
51
|
+
@return $span;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
$span-width: su-sum($span, $gutters, $spread, $validate: false);
|
56
|
+
|
57
|
+
@if unitless($span-width) {
|
58
|
+
$container-spread: su-valid-spread($container-spread);
|
59
|
+
$container: su-sum($columns, $gutters, $container-spread, $validate: false);
|
60
|
+
@return percentage($span-width / $container);
|
61
|
+
}
|
62
|
+
|
63
|
+
@return $span-width;
|
64
|
+
}
|
65
|
+
|
66
|
+
|
67
|
+
// Su Gutter
|
68
|
+
// ---------
|
69
|
+
/// Return a usable gutter length
|
70
|
+
/// in either relative or static units
|
71
|
+
///
|
72
|
+
/// @group math
|
73
|
+
///
|
74
|
+
/// @param {List} $columns -
|
75
|
+
/// List of columns in the grid
|
76
|
+
/// @param {Number} $gutters -
|
77
|
+
/// Width of a gutter in column-comparable units
|
78
|
+
/// @param {0 | 1 | -1} $container-spread -
|
79
|
+
/// Number of gutters spanned,
|
80
|
+
/// relative to `columns` count
|
81
|
+
///
|
82
|
+
/// @return {Length} -
|
83
|
+
/// Relative or static length of one gutter in a grid
|
84
|
+
@function su-gutter(
|
85
|
+
$columns,
|
86
|
+
$gutters,
|
87
|
+
$container-spread
|
88
|
+
) {
|
89
|
+
@if (type-of($gutters) == 'number') {
|
90
|
+
@if ($gutters == 0) or (not unitless($gutters)) {
|
91
|
+
@return $gutters;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
$container: su-sum($columns, $gutters, $container-spread);
|
96
|
+
@return percentage($gutters / $container);
|
97
|
+
}
|
98
|
+
|
99
|
+
|
100
|
+
// Su Sum
|
101
|
+
// ------
|
102
|
+
/// Get the total sum of column-units in a layout.
|
103
|
+
/// If static-gutter units aren't comparable to column-units,
|
104
|
+
/// gutters will be removed from the resulting sum
|
105
|
+
///
|
106
|
+
/// @group math
|
107
|
+
///
|
108
|
+
/// @param {List} $columns -
|
109
|
+
/// List of columns in the grid
|
110
|
+
/// @param {Number} $gutters -
|
111
|
+
/// Width of a gutter in column-comparable units
|
112
|
+
/// @param {0 | 1 | -1} $spread -
|
113
|
+
/// Number of gutters spanned,
|
114
|
+
/// relative to `columns` count
|
115
|
+
/// @param {Bool} $validate [true] -
|
116
|
+
/// Check that arguments are valid before proceeding
|
117
|
+
///
|
118
|
+
/// @return {Number} -
|
119
|
+
/// Total sum of column-units in a grid
|
120
|
+
@function su-sum(
|
121
|
+
$columns,
|
122
|
+
$gutters,
|
123
|
+
$spread,
|
124
|
+
$validate: true
|
125
|
+
) {
|
126
|
+
@if $validate {
|
127
|
+
$columns: su-valid-columns($columns);
|
128
|
+
$gutters: su-valid-gutters($gutters, $columns);
|
129
|
+
$spread: su-valid-spread($spread);
|
130
|
+
}
|
131
|
+
|
132
|
+
// Calculate column-sum
|
133
|
+
$column-sum: 0;
|
134
|
+
@each $column in $columns {
|
135
|
+
$column-sum: $column-sum + $column;
|
136
|
+
}
|
137
|
+
|
138
|
+
// Gutters are removed from the math if they use non-comparable static units
|
139
|
+
$not-comparable: not comparable($column-sum, $gutters);
|
140
|
+
$is-mismatch: unitless($column-sum) and (not unitless($gutters));
|
141
|
+
@if ($not-comparable or $is-mismatch) {
|
142
|
+
@return $column-sum;
|
143
|
+
}
|
144
|
+
|
145
|
+
$gutter-sum: (ceil(length($columns)) + $spread) * $gutters;
|
146
|
+
@return $column-sum + $gutter-sum;
|
147
|
+
}
|
148
|
+
|
149
|
+
|
150
|
+
// Su Slice
|
151
|
+
// --------
|
152
|
+
/// Return a subset of columns at a given location
|
153
|
+
///
|
154
|
+
/// @group math
|
155
|
+
///
|
156
|
+
/// @param {Number} $span -
|
157
|
+
/// Number of grid columns to span
|
158
|
+
/// @param {List} $columns -
|
159
|
+
/// List of columns in the grid
|
160
|
+
/// @param {Number} $location [1] -
|
161
|
+
/// Starting index of a span in the list of columns
|
162
|
+
/// @param {Bool} $validate [true] -
|
163
|
+
/// Check that arguments are valid before proceeding
|
164
|
+
///
|
165
|
+
/// @return {List} -
|
166
|
+
/// Subset list of grid columns, based on span and location
|
167
|
+
@function su-slice(
|
168
|
+
$span,
|
169
|
+
$columns,
|
170
|
+
$location: 1,
|
171
|
+
$validate: true
|
172
|
+
) {
|
173
|
+
@if $validate {
|
174
|
+
$columns: su-valid-columns($columns);
|
175
|
+
$location: su-valid-location($span, $location, $columns);
|
176
|
+
}
|
177
|
+
|
178
|
+
$floor: floor($span);
|
179
|
+
$sub-columns: ();
|
180
|
+
|
181
|
+
@for $i from $location to ($location + $floor) {
|
182
|
+
$sub-columns: append($sub-columns, nth($columns, $i));
|
183
|
+
}
|
184
|
+
|
185
|
+
@if $floor != $span {
|
186
|
+
$remainder: $span - $floor;
|
187
|
+
$column: $location + $floor;
|
188
|
+
$sub-columns: append($sub-columns, nth($columns, $column) * $remainder);
|
189
|
+
}
|
190
|
+
|
191
|
+
@return $sub-columns;
|
192
|
+
}
|