Grid Math Engine
The su functions give you direct access to the math layer,
without any syntax-sugar like shorthand parsing, and normalization.
If you prefer named arguments, and stripped-down syntax,
you can use these functions directly in your code –
replacing span, gutter, and slice.
These functions are also useful
for building mixins or other extensions to Susy.
Apply the Susy syntax to new mixins and functions,
using our “Plugin Helpers”,
or write your own syntax and pass the normalized results along
to su for compilation.
@function su-span()
Calculates and returns a CSS-ready span width,
based on normalized span and context data –
a low-level version of susy-span,
with all of the logic and none of the syntax sugar.
- Grids defined with unitless numbers will return
%values. - Grids defined with comparable units will return a value in the units provided.
- Grids defined with a mix of units,
or a combination of untiless numbers and unit-lengths,
will return a
calc()string.
Parameters & Return
$span: (number | list)
Number or list of grid columns to span
$columns: (list)
List of columns available
$gutters: (number)
Width of a gutter in column-comparable units
$spread: (0 | 1 | -1)
Number of gutters spanned,
relative to span count
$container-spread: $spread (0 | 1 | -1)
Number of gutters spanned,
relative to columns count
$location: 1 (integer)
Optional position of sub-span among full set of columns
@return (length)
Relative or static length of a span on the grid
Related
@function susy-span()
Requires
@function su-valid-span()
@function su-valid-columns()
@function su-valid-gutters()
@function su-valid-spread()
@function su-valid-location()
@function su-slice()
@function _su-needs-calc-output() [private]
@function _su-calc-span() [private]
@function _su-sum() [private]
Used By
@function su-call()
@function su-gutter()
Calculates and returns a CSS-ready gutter width,
based on normalized grid data –
a low-level version of susy-gutter,
with all of the logic and none of the syntax sugar.
- Grids defined with unitless numbers will return
%values. - Grids defined with comparable units will return a value in the units provided.
- Grids defined with a mix of units,
or a combination of untiless numbers and unit-lengths,
will return a
calc()string.
Parameters & Return
$columns: (list)
List of columns in the grid
$gutters: (number)
Width of a gutter in column-comparable units
$container-spread: (0 | 1 | -1)
Number of gutters spanned,
relative to columns count
@return (length)
Relative or static length of one gutter in a grid
Related
@function susy-gutter()
Requires
@function _su-needs-calc-output() [private]
@function _su-calc-span() [private]
@function _su-sum() [private]
Used By
@function su-call()
@function su-slice()
Returns a list of columns
based on a given span/location slice of the grid –
a low-level version of susy-slice,
with all of the logic and none of the syntax sugar.
Parameters & Return
$span: (number)
Number of grid columns to span
$columns: (list)
List of columns in the grid
$location: 1 (number)
Starting index of a span in the list of columns
$validate: true (bool)
Check that arguments are valid before proceeding
@return (list)
Subset list of grid columns, based on span and location