Arithmetic
Mathematical Functions
These @functions represent well-known classes of mathematical functions.
All parameters other than the first one define the concrete mathematical function,
while the first parameter always is the argument to that function instance.
@function identity()
Identity function (f(x) = x).
Parameters & Return
$x: (Number)
The argument to the function.
@return (Number)
$x.
@function linear()
Linear function (f(x) = mx + n).
Parameters & Return
$x: (Number)
The argument to the function.
$slope: (Number)
The slope of the function (m).
$initial: 0 (Number)
The initial value (y-intercept) of the function (n).
@return (Number)
The function value at $x.
@function polynomial()
Polynomial function (f(x) = c₀ + c₁x + c₂x² + … = ∑cᵢxⁱ).
Parameters & Return
$x: (Number)
The argument to the function.
$coefficients: (List)
The coefficients of the polynomial.
@return (Number)
The function value at $x.
Used By
@mixin palette()
@function exponential()
Exponential function (f(x) = abˣ).
Parameters & Return
$exponent: (Number)
The exponent (x).
$base: (Number)
The base (b).
$coefficient: (Number)
The coefficient (a).
@return (Number)
The coefficient times the base to the power of the exponent (abˣ).
Coloring Mixins
@mixin set-colors()
Set abstract color properties to the color specified by $name and its counterpart (-contra).
Parameters
$name: (String)
Name of the color token.
$default: null (String)
Name of the fall-back color token.
@mixin use-colors()
Use abstract color properties as color and background-color, respectively.
@mixin use-colors-inverse()
Use abstract color properties as background-color and color (inverse of use-colors), respectively.
Configuration Functions
Functions for processing configuration.
@function -map-aliases() [private]
Translate a map of aliases to values from a dictionary. Each alias is asigned the value of the aliased dictionary key.
Parameters & Return
$aliases: (Map)
Map of aliases.
$dict: (Map)
Dictionary to look up values.
@return (Map)
Map with aliases pointing to looked up values.
Used By
@function map-config()
@function -apply-domain-range() [private]
Apply a range to a given domain. If the domain doesn’t cover the range it will be repeated, adding the current lap count to each domain value and as a prefix to each key. This implies that with no domain given, we can easily use the set of integers (ℤ) as default domain.
Parameters & Return
$base: (Map)
Map of aliases.
$range: (Map)
Range limiting the domain.
@return (Map)
The domain limited by the range.
Used By
@function map-function()
@function map-function()
Translate a map of domain arguments to their values of a given function.
Parameters & Return
$domain: null (Map)
The domain on which to apply the function.
$range: null (Map)
Range limiting the domain.
$func: null (Function)
Function to apply.
$params: null (Map)
Parameters to the function.
@return (Map)
Map with domain symbols pointing to their function values.
@function map-config()
Translate a property configuration to a set of properties.
Parameters & Return
$conf: (Map)
Configuration map for this set of properties.
@return (Map)
A set of mapped, literal, and logical properties.
Geometry
Parametric Curves/Equations
Bézier Curves
Related
Wikipedia [external]
@function cubic()
Cubic Bézier curve, 1-dimensional.
Parameters & Return
$t: (Number)
The argument to the curve.
$p0: (Number)
First control point, P0.
$p1: (Number)
Second control point, P1.
$p2: (Number)
Third control point, P2.
$p3: (Number)
Fourth control point, P3.
@return (Number)
The curve value at $t.
Used By
@function cubic-2d()
@function cubic-2d()
Cubic Bézier curve, 2-dimensional.
Parameters & Return
$t: (Number)
The argument to the curve.
$x0: (Number)
Abscissa of first control point, P0.
$y0: (Number)
Ordinate of first control point, P0.
$x1: (Number)
Abscissa of second control point, P1.
$y1: (Number)
Ordinate of second control point, P1.
$x2: (Number)
Abscissa of third control point, P2.
$y2: (Number)
Ordinate of third control point, P2.
$x3: (Number)
Abscissa of fourth control point, P3.
$y3: (Number)
Ordinate of fourth control point, P3.
@return (Number)
The curve value at $t.
Layout Primitive Mixins
These are layout primitives greatly inspired by Every Layout.
The mixins are used in layout utilities but can as well be included through any selector to apply layouts without the need to add utility classes to the markup.
@mixin box.layout()
Box layout.
Requires
@function svar()
@mixin center.layout()
Center layout.
@mixin center.modifier-intrinsic()
Center layout with intrinsic centering.
@mixin cluster.layout()
Wrap as cluster (densely packed).
Requires
placeholder wrap-base
@mixin cluster.modifier-center()
Cluster layout with centered alignment.
@mixin cluster.modifier-end()
Cluster layout with alignment to the end.
@mixin cluster.modifier-justified()
Cluster layout with justified alignment.
@mixin columns.layout()
Wrap column-wise (multi-column layout).
Related
Requires
placeholder wrap-base
@mixin cover.layout()
Cover layout.
Requires
@function svar()
@mixin grid.layout()
Wrap in a grid adaptive to the suggested column width: Get equal columns over all rows.
Custom properties:
Requires
placeholder wrap-base
@mixin grid.modifier-fit()
Grid layout with fitting under-full grids.
Related
@mixin grid.layout-flex()
Wrap in flexible rows (“flex-grid”):
Similar to the grid, but with the width of columns determined individually based on the number of columns in each row. Example: Given five items and a container that can take three of them in a row, the second row will be made up of the two remaining items taking up one half of the space each, instead of leaving the last third empty.
Custom properties:
---min-column-size{number} [70% of current measure]: The minimum size of columns.
Requires
placeholder wrap-base
@mixin sidebar.layout()
Sidebar layout.
Requires
placeholder wrap-base
@mixin sidebar.modifier-end()
Sidebar layout with the last child as sidebar.
Related
@mixin sidebar.modifier-reverse()
Sidebar layout with the order of children reversed.
Related
@mixin stack.layout()
Stack layout.
Requires
@function svar()
@mixin switcher.layout()
Switcher layout.
placeholder wrap-base
Common traits for all wrap-related layouts.
[1] General sizing (based on measure) and spacing for wrap layouts.
[2] Do not apply flow space in flex or grid layout. Note: Once container style queries have sufficient browser support this can be done as a generic flow rule.
Used By
@mixin cluster.layout()
@mixin columns.layout()
@mixin grid.layout()
@mixin grid.layout-flex()
@mixin sidebar.layout()
@mixin wrap.layout-reset()
Reset wrapping: Let this item claim the space of the whole row.
Related
Meta Functions
Functions for working with function objects.
@function call-conditional()
Call a function with one argument and with or without additional parameters.
Parameters & Return
$func: (Function)
Mapping function.
$arg: (Number)
The argument to the function.
$params: null (Map)
Parameters to the function.
@return (*)
The return value of the function call.
Used By
@function map-function()
Typography
Typographical Rhythm
@function rlh()
Derive root line-height (rlh).
Parameters & Return
$scale-base: (Number<rem|em|%>)
Base font-size of the typographical scale.
$line-root: (Number)
Relative line-height of the document root.
@return (Number<rem>)
Root line height. Absolute value mimicking the experimental CSS unit [rlh][mdn:rlh].
@function grid-line()
Baseline grid compatible line height at a given font size.
Parameters & Return
$em: (Number<rem|em|%>)
Font size to fit.
$rlh: (Number<rem>)
Root line height.
$min: (Number)
Minimum line height ratio.
$sub: (Number)
The number of line sub-divisions the grid allows.
@return (Number<rem|unitless>)
The minimum line height that fits the font size.
For rem-based font sizes this is also in rem, otherwise a unit-less number.