animations

mixins

animation-back-face

@mixin animation-back-face($flip-axis: 'horizontal', $z-val: 10) { ... }

Description

Apply to the child element of the element with the a 3D transform effect to represent the backside of the card that the animation flips to or past.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$flip-axis`	Set this value equal to the axis the element will flip over in order to ensure that the content of the back-face of the element is oriented correctly. The $axis is a parameter set in animation mixins which involve a 3D flipping effect. Accepted values for the $flip-axis are `horizontal`, `vertical`, `diagonal`, and `diagonal2`.	`String`	`'horizontal'`
`$z-val`	The z-index value.s	`Number`	`10`

Throws

Invalid $flip-axis data type passed to the
Invalid flip-axis value of #{meta.inspect($flip-axis)} for the
Invalid $z-val z-index value of #{meta.inspect($z-val)} for the

Requires

[function] is-alias
[function] is-number
[function] is-string

animation-front-face

@mixin animation-front-face($z-index: 20) { ... }

Description

Apply to the child element of an element with a 3d transform effect to represent the front-face of the card that the animation flips over.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$z-index`	The z-index value.	`Number`	`20`

Throws

Invalid $z-val z-index value of #{meta.inspect($z-val)} for the

animation-stage

@mixin animation-stage($perspective: 500px, $p-origin: 55% 50%, $size: null, $z-index: null, $height: $size) { ... }

Description

Apply the animation stage to the parent element of any element that has a 3D animation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$perspective`	The `perspective` property's value that will affect the child element's 3D animation. Can be a length value, the keyword value `none`, or a CSS global value.	`Number` or `String`	`500px`
`$p-origin`	The `perspecitve-origin` property's value that will affect the child element's 3D animation. The syntax for this property can be just an x-position which can be the keyword, `left` (equal to a 0 value), `center` (equal to 50%), or `right` (equal to 100%), or can be a length-percentage. It can be also be in an x-position y-position 2-value format. The y-position value can be the keyword, `top` (equal to 0), `center` (equal to 50%), or `bottom` (equal to 100%), or can it can be a length-percentage. (Ex: `left bottom` or `100% 50%`). This property also accepts any CSS global value as valid.	`String` or `Number` or `List`	`55% 50%`
`$size`	The size of the element. If the $height value is not explicitly set, this will set both width and height. If the $height value is passed, this will only set the width.	`Number`	`null`
`$z-index`	Sets the z-index value, if passed.	`Number`	`null`
`$height`	The height of the element.	`Number`	`$size`

Throws

Invalid number of values used for $p-origin in the
Invalid value used for $p-origin in the
Invalid z-index value passed to the [ animation-stage() ] mixin.
Invalid $perspective value passed to the [ animation-stage() ]

Requires

[function] equals-false
[function] is-alias
[function] is-calculation
[function] is-global-value
[function] is-length
[function] is-list
[function] is-number
[function] is-percentage
[function] is-position
[function] is-string
[function] list-to-string

bg-zoom

@mixin bg-zoom($direction: 'bottom', $duration: 5s, $delay: null, $anim-num: null) { ... }

Description

Does a slow and artistic Ken Burns style zoom-in on the background image of an element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction of the angle the zoom-in will have. Accepts `top`, `left`, `right`, `bottom`, `bottom-right`, `top-right`, `bottom-left`, or `top-left`.	`String`	`'bottom'`
`$duration`	The duration of the animation's effect.	`Number`	`5s`
`$delay`	An optional delay before starting the effect.	`Number`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $direction of #{meta.inspect($direction)} for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the

Requires

[function] equals-false
[function] is-alias
[function] is-falsey
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

bounce

@mixin bounce($in-or-out: in, $direction: 'top', $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

An animation that bounces an element in to view. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will bounce 'in' (pass `in`, `true`, or `i`) or 'out' (pass `out`, `false`, or `o`).	`String` or `Bool`	`in`
`$direction`	The direction the animation will appear to be bouncing 'in' from or bouncing 'out' towards, depending on the value of $in-or-out. Accepts the values of `top`, `bottom`, `left`, `right`, `backwards` or `forwards`. Accepted values also include all valid aliases for these $direction values.	`String`	`'top'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. The default of `null` applies the default timing function of ease.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid value for $in-or-out of #{meta.inspect($in-or-out)}
#{$direction} is not a valid direction for the [ bounce() ] mixin.
Invalid $duration value of #{$duration} for the [ bounce() ]
Invalid delay value of #{meta.inspect($delay)} for the [ bounce() ]
Invalid $iterations value of #{meta.inspect($iterations)} for
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] is-list
[function] is-list
[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-number
[function] is-string
[function] list-to-string

bounciness

@mixin bounciness($direction: 'top', $duration: 0.9s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Adds bounciness to a given element, bouncing it in place.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the animation will appear to be bouncing towards. Accepted values are `top`, `bottom`, `left`, `right`, or any valid aliases for these $direction values.	`String`	`'top'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.9s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. The default of null applies the default timing function of ease.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $direction value of #{meta.inspect($direction)} for the
Invalid $duration value of #{$duration} for the [ bounciness() ]
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir} for

Requires

[function] equals-false
[function] is-alias
[function] is-global-value
[function] is-falsey
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

circular-motion

@mixin circular-motion($radius, $progress) { ... }

Description

Used with user-created animation keyframes to create a circular motion based on parametric equations.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	Pass a lenght value for the radius of the motion.	`Number`	— none
`$progress`	Pass the current progress of the animation when the mixin is being used. Can be a value between 0-1 or a percentage 0% - 100%.	`Number`	— none

color-shifter

@mixin color-shifter($colors: (), $duration: null, $delay: null, $iterations: infinite, $anim-dir: alternate, $timing-func: linear, $is-fg-shifter: null, $anim-num: null) { ... }

Description

Animates the shift between any quantity of given colors.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$colors`	A list of colors that the animation will shift between, one into the next.	`List`	`()`
`$duration`	The amount of time it takes the animation to shift from one color into the next one. This value must be in either milliseconds (`ms`) or seconds (`s`). If a only a unit-less number is passed, it will be assumed that the value is in seconds. When no argument is passed, the default timing is 2s per color shift.	`String` or `Number`	`null`
`$delay`	The amount of time before the color shifting animation first starts. No delay is the default. This value must be in either milliseconds (`ms`) or seconds (`s`). If only a unit-less number is passed, it will be assumed that the value is in seconds.	`String` or `Number`	`null`
`$iterations`	The number of iterations for the animation to complete. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`infinite`
`$anim-dir`	Sets the animation-direction property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value.	`String`	`alternate`
`$timing-func`	The timing function for the animation's shifting effect.	`Timing-function`	`linear`
`$is-fg-shifter`	All values except for `null` `false`, `'false'`, `'background'`, and `'bg'` will make the animation shift the foreground (text) color instead of the default background-color.	`Bool` or `String`	`null`
`$anim-num`	If the color-shifter mixin is used more than once in a stylesheet with different values, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

You need to pass a list of at least 2 colors in order to use the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid $duration value of #{$duration} for the [ color-shifter() ]
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}
Invalid data type for the $anim-num parameter passed to the

Requires

[function] equals-false
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] is-time
[function] list-to-string

fade

@mixin fade($in-or-out: 'in', $direction: null, $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that fades an element in or out. If a forward or backward direction is chosen to augment the fade, it is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will fade 'in' (pass `in`, `true`, or `i`) or 'out' (pass `out` `false`, or `o`).	`String` or `Bool`	`'in'`
`$direction`	Will optionally either fade 'in' from this direction or fade 'out' towards this direction, depending on the value of $in-or-out. May also not come from a direction at all if `null` is passed. Accepted values are `null`, `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`, `forwards`, and `backwards`, or any valid aliases for these $direction values.	`String`	`null`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the animation-direction property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid value for $in-or-out of #{meta.inspect($in-or-out)}
Invalid $direction of #{meta.inspect($direction)} chosen for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the [ fade() ] mixin.
Invalid $iterations value of #{meta.inspect($iterations)} for
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

fast-frames

@mixin fast-frames($animation-name, $property, $from, $to) { ... }

Description

A fast way to create vendor-prefixed keyframes with only a 0% and 100% value.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$animation-name`	The name given to the animation.	`String`	— none
`$property`	The name of the property being animated.	`String`	— none
`$from`	The value of the property at 0%.	`Any`	— none
`$to`	The value of the property at 100%.	`Any`	— none

flick

@mixin flick($in-or-out: 'in', $direction: 50%, $duration: 1s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that looks like it is being flicked in or out.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will flick `in` (`true`) or `out` (`false`).	`String` or `Bool`	`'in'`
`$direction`	Resolves to the value for the `transform-origin` property used in the keyframes of the animation. Almost any value that is valid for `transform-origin` is valid here, along with many aliases. If you pass a direction keyword (`top`, `top right`, `right` `bottom right`, `bottom`, `bottom left`, `left,` `top left`, `center`) that value corresponds to the direction the animation appears to be moving in from or out towards. In this way, passing keyword direction is almost as if you are setting a "transform-destination" property. You can also directly pass 1, 2, or 3 value syntax that will be used directly for the `transform-origin` property on the animation's keyframes. Does not accept CSS global values due to being used in the keyframes, not on the selector itself.	`String` or `Number` or `List`	`50%`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`1s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will cause the animation to render according to the CSS default timing function value of `ease`;	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for the
#{$trans-error-start} The transform-origin property only
#{$trans-error-start} When using the 3-value syntax with the
#{$trans-error-start} Horizontal axis for this property
#{$trans-error-start} Vertical axis for this property
#{$trans-error-start} When using the #{$num-origin-vals}
Invalid $duration value of #{$duration} for the [ flick() ]
Invalid $duration value of #{$duration} for the [ flick() ] mixin.
Invalid delay value of #{meta.inspect($delay)} for the [ flick() ] mixin.
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] equals-true
[function] is-alias
[function] is-global-value
[function] is-length
[function] is-number
[function] is-position
[function] is-string
[function] is-list
[function] list-to-string

flip-scale-2

@mixin flip-scale-2($direction: 'top', $duration: 0.5s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: linear, $anim-num: null) { ... }

Description

Generates an animation that flips an element over while scaling it. The effect is slightly different than in flip-scale. The element this mixin is applied to must have a front-side and a back-side child element. It is recommended that you use this mixin in conjunction with the animation-front-face() and 'animation-back-face()' mixins for card 'face' child elements and the 'animation-stage()` mixin for the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the animation appears to be fliping from. Can be either `top`, `bottom`, `right`, or `left`.	`String`	`'top'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`0.5s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations for the animation to complete. Can be `infinite`, `inherit`, `initial`, or any unitless number. Can also be any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation.	`Timing-function`	`linear`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid direction value of #{meta.inspect($direction)} for the
Invalid $duration value of #{$duration} for the [ flip-scale-2() ]
Invalid delay value of #{meta.inspect($delay)} for the flip-scale-2`
Invalid delay value of #{meta.inspect($delay)} for the [ flip-scale-2() ]
Invalid $iterations value of #{meta.inspect($iterations)} for the
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] is-alias
[function] is-list
[function] is-global-value
[function] is-number
[function] is-string
[function] list-to-string
[mixin] only-moz

flip-scale

@mixin flip-scale($direction: 'right', $axis: 'horizontal', $duration: 0.5s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: linear, $anim-num: null) { ... }

Description

Generates an animation that flips an element over while scaling it. The element this mixin is applied to must have a front-face and a back-face child element. It is recommended that you use this mixin in conjunction with the animation-front-face() and 'animation-back-face()' mixins for card face child elements and the 'animation-stage()` mixin for the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the scale effect causes the element to seem to be moving towards. Can be one of the following values: `top` or `up` and `down` or `bottom`.	`String`	`'right'`
`$axis`	The axis the element will flip over. Can be one of the following values: `horizontal`, `vertical`, `diagonal`, or `diagonal2`. There are many alias values for these axis values. See the `$map-alias-resolutions` variable in the `variables/_maps.scss` file for all passable values.	`String`	`'horizontal'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`0.5s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation.	`Timing-function`	`linear`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $axis value of #{meta.inspect($axis)} for the
Invalid axis value of #{meta.inspect($axis)} for the
Invalid direction value of #{meta.inspect($direction)} for the
Invalid $duration value of #{$duration} for the [ flip-scale() ]
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] is-alias
[function] is-list
[function] is-number
[function] is-global-value
[function] is-string
[function] list-to-string
[mixin] only-moz

flip

@mixin flip($direction: 'top', $axis: 'horizontal', $duration: 0.5s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that flips an element over. The element this mixin is applied to must have a front-face and a back-face child element. It is recommended that you use this mixin in conjunction with the animation-front-face() and 'animation-back-face()' mixins for element face child elements and the 'animation-stage()` mixin for the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the scale effect causes the element to seem to be moving towards. Accepted values are: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`, `forwards`, `backwards`, and all valid aliases for these $direction values.	`String`	`'top'`
`$axis`	The axis the element will flip over. Can be one of the following values: `horizontal`, `vertical`, `diagonal`, or `diagonal2`. There are many alias values for these axis values. See the `$map-alias-resolutions` variable in the `variables/_maps.scss` file for all passable values.	`String`	`'horizontal'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`0.5s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the animation-direction property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation.`	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid direction of #{meta.inspect($direction)} chosen for
You must provide a direction for the [ flip() ] mixin.
Invalid axis of [ #{meta.inspect($axis)} ] chosen for the [ flip() ] mixin.
You must choose an axis for the [ flip() ] mixin.
Invalid $direction value of #{meta.inspect($direction)} with an
Invalid $direction value of #{meta.inspect($direction)} with
Invalid $direction value of #{meta.inspect($direction)} with
Invalid direction value of #{meta.inspect($direction)} with
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] is-alias
[function] is-list
[function] is-global-value
[function] is-number
[function] is-string
[function] list-to-string
[mixin] only-moz
[variable] map-alias-resolutions

hinge

@mixin hinge($open-or-closed: 'open', $fwd-or-bck: 'forwards', $position: 'top', $has-fade: false, $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an hingeing open or hingeing closed animation that turns an element from one of its corners. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$open-or-closed`	Determines if the element will hinge 'open' (`open`, `true`, or `o`) or 'closed' (`closed`, `close`, `false`, or `c`).	`String` or `Bool`	`'open'`
`$fwd-or-bck`	Determines if the element will hinge 'forwards' (`forwards`, `forward`, `fwd`, or `true`), or hinge 'backwards' (`backwards`, `backward`, `back`, `bck`, or `false`).	`String` or `Bool`	`'forwards'`
`$position`	This animation will either hinge open or closed from this position on the element, The value of $position must be one of the following: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left,`top-left`, or any valid aliases for these $position values.	`String`	`'top'`
`$has-fade`	Adds a fade to the animation that fades out on 'open' and fades in when 'closed', depending on the value of $open-or-closed. To flag as true, pass `true`, `'true'` or `'fade'`. If the fade is turned on, the animation will not display the backside of the element if you are trying to achieve that with `animation-front-face()`, and `animation-back-face()` mixins.	`Bool` or `String`	`false`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A default of null will apply a timing-function of ease-out on a hinge-open animation and ease-in on a hinge-closed animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $open-or-closed value of #{meta.inspect($open-or-closed)}
Invalid $fwd-or-bck value of #{meta.inspect($fwd-or-bck)}
Invalid $position of #{meta.inspect($position)} chosen for
You must pass a $position for the [ hinge() ] mixin. The
Invalid value for $has-fade of #{meta.inspect($has-fade)} passed
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

pan-wipe

@mixin pan-wipe($direction: 'right', $duration: 6s, $bg: linear-gradient(270deg, #CC6AA5, #3E91CC, #2dCCA7) center / 600% 100%, $size: 100%, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $height: $size, $anim-num: null) { ... }

Description

Animates a panning wipe style effect on the background property of an element. Works best with a gradient or an image.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the pan-wipe effect is heading. Accepted values are `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`, and all valid aliases for these $direction values.	`String`	`'right'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`6s`
`$bg`	The shorthand background property for the element. For this effect it is recommended to use either a gradient or an image.	`Mixed`	`linear-gradient(270deg, #CC6AA5, #3E91CC, #2dCCA7) center / 600% 100%`
`$size`	The size of the element. If the $height property is not set explicitly, this is both height and width, but if $height is set explicitly, then this value sets only the width.	`Number`	`100%`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. The default of null will set it to the default timing function of ease.	`Timing-function`	`null`
`$height`	The height of the element.	`Number`	`$size`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $direction unit type for the [ pan-wipe() ] mixin. Value must
Invalid data type for $size of $height passed to the [ pan-wipe() ]
Invalid $direction value of #{meta.inspect($direction)} for the
Invalid $duration value of #{$duration} for the [ pan-wipe() ]
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] is-list
[function] is-list
[function] is-falsey
[function] is-falsey
[function] equals-false
[function] is-alias
[function] is-global-value
[function] is-length
[function] is-number
[function] is-string
[function] list-to-string

ping

@mixin ping($in-or-out: 'in', $duration: 1s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that looks like it is being pinged in or out as it bounces around.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will ping `in` (`true`) or `out` (`false`).	`String` or `Bool`	`'in'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`1s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will cause the animation to render according to the CSS default timing function value of `ease`;	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for the
Invalid $duration value of #{$duration} for the [ ping() ]
Invalid $duration value of #{$duration} for the [ ping() ] mixin.
Invalid delay value of #{meta.inspect($delay)} for the [ ping() ] mixin.
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] equals-true
[function] is-alias
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

poof-puff

@mixin poof-puff($in-or-out: 'in', $direction: 'center', $duration: 0.7s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that combines the animation of the poof() and puff() mixins to animate an element in or out. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will poof-puff 'in' (`in`, `i`, or `true`) or 'out' (`out`, `o`, or `false`).	`Bool` or `String`	`'in'`
`$direction`	Will, depending on `$in-or-out`, either poof-puff in from this direction or poof-puff out towards this direction. Accepted values include: `center`, '`top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`, `horizontal`, `vertical`, `forwards`, or `backwards`.	`String`	`'center'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`0.7s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `cubic-bezier(0.47, 0, 0.745, 0.715)` if the animation is poof-puffing in, and `cubic-bezier(0.165, 0.84, 0.44, 1)` if the animation is poof-puffing out.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for the
Invalid direction of #{meta.inspect($direction)} chosen for the
Invalid $duration value of #{$duration} for the [ poof-puff() ]
Invalid $duration value of #{$duration} for the [ poof-puff() ] mixin.
Invalid delay value of #{meta.inspect($delay)} for the [ poof-puff() ] mixin.
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] equals-true
[function] is-alias
[function] is-global-value
[function] is-number
[function] is-string
[function] is-list
[function] list-to-string

poof

@mixin poof($in-or-out: 'in', $direction: 'center', $duration: 0.7s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that poofes an element in or out. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will poof 'in' (`in`, `i`, or `true`) or 'out' (`out`, `o`, or `false`).	`Bool` or `String`	`'in'`
`$direction`	Will, depending on `$in-or-out`, either poof in from this direction or poof out towards this direction. Accepted values include: `center`, '`top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`, `horizontal`, or `vertical`.	`String`	`'center'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`0.7s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `cubic-bezier(0.47, 0, 0.745, 0.715)` if the animation is poofing in, and `cubic-bezier(0.165, 0.84, 0.44, 1)` if the animation is poofing out.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for the
Invalid direction of #{meta.inspect($direction)} chosen for the
Invalid $duration value of #{$duration} for the [ poof() ]
Invalid $duration value of #{$duration} for the [ poof() ] mixin.
Invalid delay value of #{meta.inspect($delay)} for the [ poof() ] mixin.
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] equals-true
[function] is-alias
[function] is-global-value
[function] is-number
[function] is-string
[function] is-list
[function] list-to-string

power

@mixin power($on-or-off: 'in', $trans-origin: 50%, $duration: 1s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that looks like a CRT tv being powered on or off. It is recommended to use the animation-stage() mixin on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$on-or-off`	Determines if the element will power `on` (`true`) or `off` (`false`).	`String` or `Bool`	`'in'`
`$trans-origin`	The argument for the `transform-origin` property used in the keyframes of the animation. Almost any value that is valid for `transform-origin` is valid here, along with many aliases (such as 'top-right`or`tr`is the equivalent of`right top`or`100% 0%`. Does not accept CSS global values due to being used in the keyframes, not on the selector itself.	`String` or `Number` or `List`	`50%`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`1s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will cause the animation to render according to the CSS default timing function value of `ease`;	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $on-or-off value of #{meta.inspect($on-or-off)} for the
#{$trans-error-start} The transform-origin property only
#{$trans-error-start} When using the 3-value syntax with the
#{$trans-error-start} Horizontal axis for this property
#{$trans-error-start} Vertical axis for this property
#{$trans-error-start} When using the #{$num-origin-vals}
Invalid $duration value of #{$duration} for the [ power() ]
Invalid $duration value of #{$duration} for the [ power() ] mixin.
Invalid delay value of #{meta.inspect($delay)} for the [ power() ] mixin.
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] equals-true
[function] is-alias
[function] is-global-value
[function] is-length
[function] is-number
[function] is-position
[function] is-string
[function] is-list
[function] list-to-string

puff

@mixin puff($in-or-out: 'in', $direction: 'center', $duration: 0.7s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that puffs an element in or out. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will puff 'in' (`in`, `i`, or `true`) or 'out' (`out`, `o`, or `false`).	`Bool` or `String`	`'in'`
`$direction`	Will, depending on `$in-or-out`, either puff in from this direction or puff out towards this direction. Accepted values include: `center`, '`top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`, `horizontal`, `vertical`, `forwards`, or `backwards`.	`String`	`'center'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`0.7s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `cubic-bezier(0.47, 0, 0.745, 0.715)` if the animation is puffing in, and `cubic-bezier(0.165, 0.84, 0.44, 1)` if the animation is puffing out.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for the
Invalid direction of #{meta.inspect($direction)} chosen for the
Invalid $duration value of #{$duration} for the [ puff() ]
Invalid $duration value of #{$duration} for the [ puff() ] mixin.
Invalid delay value of #{meta.inspect($delay)} for the [ puff() ] mixin.
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] equals-true
[function] is-alias
[function] is-global-value
[function] is-number
[function] is-string
[function] is-list
[function] list-to-string

roll

@mixin roll($in-or-out: 'in', $direction: 'left', $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that rolls an element in or out, from or towards a given direction.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will roll 'in' (`in`, `true`, or `i`) or 'out' (`out`, `false`, or `o`).	`Bool` or `String`	`'in'`
`$direction`	Will either roll in from this direction or roll out towards this direction, depending on the value of $in-or-out. The value of $direction must be one of the following: `top`, `right`, `bottom`, `left`, or any valid aliases for these $direction values.	`String`	`'left'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `ease-out` on a roll-in animation, and `ease-in` on a roll-out animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for
Invalid direction of #{meta.inspect($direction)} chosen for
You must pass a $direction for the [ roll() ] mixin. The
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

rotate-scale

@mixin rotate-scale($up-or-down: 'up', $duration: 0.4s, $delay: null, $axis: null, $iterations: null, $anim-dir: null, $timing-func: linear, $anim-num: null) { ... }

Description

Animates an element by rotating it along a point and/or an axis while either scaling it up or down. For optimal effect, use the animation-stage() mixin on the parent element, and a front and back child element within the rotated element, with the animation-front-face() and animation-back-face() mixins applied, respectively. This way, the element will have two distinct sides.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$up-or-down`	Whether the elelment is scaling 'up' (pass `up`, `top` or `true`) or 'down' (pass `down`. `bottom`, or `false`).	`Bool` or `String`	`'up'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.4s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$axis`	The animation can optionally rotate along an axis line. This value can be `null` (or `false`, `no`, `n`), `horizontal` (or `horiz`, `horz`, `hor`, `h`) or `vertical` (or `vert`, `ver`, `v`). It can also be either `diagonal` (or `diag` `diagonal1`, `diag1`, `d`, `d1`), or `diagonal2` (or `diag2`, `d2`).	`String`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation.	`Timing-function`	`linear`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $up-or-down value of [#{meta.inspect($up-or-down)}] for
Invalid $axis value of #{meta.inspect($axis)} for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid $anim-dir value of #{meta.inspect($anim-dir)} for the

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string
[mixin] only-moz

rotate

@mixin rotate($point: 'center', $duration: 0.4s, $delay: null, $axis: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Animates an element by rotating it along a point and/or an axis. For the the best effect on a diagonal rotation, use the animation-stage mixin on the parent element, and a front and back child element within the rotated element, with the animation-front-face() and animation-back-face() mixins applied, respectively.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$point`	The point the element will appear to be rotating around. Can be `center`, `top`, `top-right,` `right`, `bottom-right`, `bottom`, `bottom-left`, `left,`top-left`, and all valid aliases for these $point values.	`String`	`'center'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.4s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$axis`	The animation can optionally rotate along an axis line. This value can be `null` (or `false`, `no`, `n`), `horizontal` (or `horiz`, `horz`, `hor`, `h`) or `vertical` (or `vert`, `ver`, `v`). Along the horizontal axis, only `top`, `bottom`, or `center` $point values are valid. Along the vertical axis, only `left`, `right`, or `center` $point values are valid.	`String`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. Default value of null will apply the recommended function for this animation of `cubic-bezier(0.25, 0.46, 0.45, 0.94)`, unless the `$axis` value is `null`, in which case the timing-function defaults to `linear`.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $point value of #{meta.inspect($point)} for the
You have chosen an axis value of \
Invalid $axis value of #{meta.inspect($axis)} for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid $delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] equals-false
[function] is-alias
[function] is-global-value
[function] is-falsey
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string
[mixin] only-moz

scale-down

@mixin scale-down($direction: 'center', $duration: 0.4s, $delay: null, $axis: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Animates an element by scaling it down.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction from which the element will appear to be scaling down. Accepted values are `center`, `top`, `top-right,` `right`, `bottom-right`, `bottom`, `bottom-left`, `left,`top-left`, and all valid aliases for these $direction values.	`String`	`'center'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.4s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$axis`	The animation can optionally start along an axis line. This value can be null (or false, `no`, `n`), `horizontal` (or `horiz`, `horz`, `hor`, `h`) or `vertical` (or `vert`, `ver`, `v`). Along the horizontal axis, only `left`, `right`, or `center` $direction values are valid. Along the vertical axis, only `top`, `bottom`, and `center` $direction values are valid.	`String`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. Default value of null will apply the recommended function for this animation of `cubic-bezier(0.25, 0.46, 0.45, 0.94)`.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $direction value of #{meta.inspect($direction)} for the
You have chosen an axis value of vertical that cannot be
You have chosen an axis value of horizontal that cannot be
Invalid $axis value of `#{meta.inspect($axis)} for the
Invalid $duration value of #{$duration} for the [ scale-down() ]
Invalid delay value of #{meta.inspect($delay)} for the [ scale-down() ]
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

scale-up

@mixin scale-up($direction: 'center', $duration: 0.4s, $delay: null, $axis: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Animates an element by scaling it up.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the element will appear to be scaling up from. Can be `center`, `top`, `top-right,` `right`, `bottom-right`, `bottom`, `bottom-left`, `left, or`top-left`. Accepted values also include all valid aliases for these $direction values.	`String`	`'center'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.4s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$axis`	The animation can optionally start along an axis line. This value can be `null` (or `false`, `no`, `n`), `horizontal` (or `horiz`, `horz`, `hor`, `h`) or `vertical` (or `vert`, `ver`, `v`). Along the horizontal axis, only `left`, `right`, or `center` $direction values are valid. Along the vertical axis, only `top`, `bottom`, and `center` $direction values are valid.	`String`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. Default value of null will apply the recommended function for this animation of `cubic-bezier(0.39, 0.575, 0.565, 1)` (the equivalent of timing('ease-out-sine')).	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid direction value of #{meta.inspect($direction)} for the
You have chosen an axis value of vertical that cannot be
You have chosen an axis value of horizontal that cannot be
Invalid $axis value of #{meta.inspect($axis)} for the [ scale-up() ] mixin.
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

slide

@mixin slide($in-or-out: 'in', $direction: 'top', $duration: 0.6s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that slides an element in or out from or towards a given direction.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will slide 'in' (`in`, `true`, or `i`) or 'out' (`out`, `false`, or `o`).	`Bool` or `String`	`'in'`
`$direction`	Will either slide in from this direction or slide out towards this direction, depending on the value of $in-or-out. Accepts the following $direction values: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, and `top-left`. Accepted values also include all valid aliases for these $direction values.	`String`	`'top'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`0.6s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the animation-direction property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property's default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A `null` value passed here will default to the recommended timing function for this animation of `cubic-bezier(0.25, 0.46, 0.45, 0.94)` (the equivalent of timing('ease-out-quad')) on a "slide in" and `cubic-bezier(0.55, 0.085, 0.68, 0.53)` (the equivalent of timing('ease-in-quad')) on a "slide out".	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for the
Invalid direction of #{meta.inspect($direction)} chosen for the
No $direction value specified for the [ slide() ] mixin. You must
Invalid $duration value of #{$duration} for the [ slide() ]
Invalid $duration value of #{$duration} for the [ slide() ] mixin.
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)} for
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

slit

@mixin slit($in-or-out: 'in', $axis: 'horizontal', $duration: 0.5s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that appears to either slit an element in or out on its axis. It is recommended to use the animation-stage() mixin on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will appear to slit `in` or `out`.	`String` or `Bool`	`'in'`
`$axis`	The axis on which the animation turns the element. Must be one of the following values: `horizontal`, `vertical`, `diagonal` or `diagonal2`.	`String`	`'horizontal'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`0.5s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A default of null will apply a timing-function of ease-out on a slit-in animation and ease-in on a slit-out animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for the
Invalid $axis of #{meta.inspect($axis)} chosen for the
You must choose an axis for the [ slit() ] mixin.
Invalid $duration value of #{$duration} for the [ slit() ]
Invalid delay value of #{meta.inspect($delay)} for the [ slit() ]
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string
[mixin] only-moz

snappiness

@mixin snappiness($axis: 'horizontal', $duration: 0.9s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Animates an element like it is a rubber band being pulled and snapped. It is recommended to use the animation-stage() mixin on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$axis`	The axis the animation occurs along. Can be `horizontal`, `vertical`, `diagonal`, or `diagonal2`.	`String`	`'horizontal'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.9s`
`$delay`	The optional delay of the animation (ms or s)	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null $timing-func will create an animation with the CSS default timiing-function of ease.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

#{meta.inspect($axis)} is not a valid direction for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

space

@mixin space($in-or-out: 'in', $direction: 'left', $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates a spacey animation that spaces an element in or out, from or towards a given direction.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will space 'in' (`in`, `true`, or `i`) or 'out' (`out`, `false`, or `o`).	`String` or `Bool`	`'in'`
`$direction`	Will either space in from this direction or space out towards this direction, depending on the value of $in-or-out. The value of $direction must be one of the following: `top`, `right`, `bottom`, `left`, or any valid aliases for these $direction values.	`String`	`'left'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `ease-out` on a space-in animation, and `ease-in` on a space-out animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for
Invalid $direction of #{meta.inspect($direction)} chosen for
You must pass a $direction for the [ space() ] mixin. The
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

speed

@mixin speed($in-or-out: 'in', $side: 'left', $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates a speed animation that speeds an element in or out, from or towards a given direction. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will speed 'in' (`in`, `true`, or `i`) or 'out' (`out`, `false`, or `o`).	`String` or `Bool`	`'in'`
`$side`	Will either speed in from this side or speed out towards this side, depending on the value of $in-or-out. The value of $side must be either `left` or `right`, or any valid aliases for these $side values.	`String`	`'left'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `ease-out` on a speed-in animation, and `ease-in` on a speed-out animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for
Invalid $side of #{meta.inspect($side)} chosen for
You must pass a $side for the [ speed() ] mixin. The
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

swing

@mixin swing($open-or-closed: 'open', $corner: 'top-right', $has-fade: false, $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an swinging open or swinging closed animation that turns an element from one of its corners.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$open-or-closed`	Determines if the element will swing 'open' (`open`, `true`, or `o`) or 'closed' (`closed`, `close`, `false`, or `c`).	`String` or `Bool`	`'open'`
`$corner`	Will either swing open or closed from this corner of the element, depending on the value of $open-or-closed The value of $corner must be one of the following: `top-right`, `bottom-right`, `bottom-left`, `top-left`, or any valid aliases for these $corner values.	`String`	`'top-right'`
`$has-fade`	Adds a fade to the animation that fades out on 'open' and fades in when 'closed', depending on the value of $open-or-closed. To flag as true, pass `true`, `'true'` or `'fade'`.	`Bool` or `String`	`false`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will cause the animation to render according to the CSS default timing function value of `ease`;	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $open-or-closed value of #{meta.inspect($open-or-closed)}
Invalid $corner of #{meta.inspect($corner)} chosen for
You must pass a $corner for the [ swing() ] mixin. The
Invalid value for $has-fade of #{meta.inspect($has-fade)} passed
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-blur-out

@mixin text-blur-out($style: 'out', $duration: 1s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Animates text from being in focus, to blurred out, to invisible.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$style`	The style of the blur-out effect. Can be `out` (or `none` or `default`), `expand` (or `grow`), `contract`, (or `shrink`) `forwards`, `backwards`, or any valid aliases for these values.	`String`	`'out'`
`$duration`	The duration of the animation (in s or ms).	`Number`	`1s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. If no specific function is passed, the mixin will choose the best custom timing function for the given style.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)} for
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-drop-shadow

@mixin text-drop-shadow($direction: 'center', $duration: 0.7s, $delay: null, $shadow-color: #000, $anim-num: null) { ... }

Description

Adds a shadow dropping animation to a given element's text

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the shadow will fall.	`String`	`'center'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.7s`
`$delay`	The duration of the optional animation delay.	`Number`	`null`
`$shadow-color`	The color for the shadow. Must be in 3 or 6 digit hexadecimal notation.	`Color`	`#000`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $direction value of #{meta.inspect($direction)}
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the

Requires

[function] is-color
[function] black
[function] equals-false
[function] is-alias
[function] is-falsey
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-flicker

@mixin text-flicker($in-or-out: 'in', $duration: 3s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: linear, $anim-num: null) { ... }

Description

Animates text by flickering it into or out of view.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines whether the text will flicker into or out of view. Can either be `in` or `out`.	`Bool` or `String`	`'in'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`3s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation.	`Timing-function`	`linear`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid in-out value of #{meta.inspect($in-or-out)} for the text-flicer mixin.
Invalid $duration value of #{$duration} for the [ text-flicker() ]
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)} for
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-color
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-focus-in

@mixin text-focus-in($style: 'default', $duration: 0.9s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Animates text from a blurred to a focused state. If a forwards or backwards $direction is chosen to augment the animation, it is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$style`	The style of the focus-in effect. Can pass nothing, `null`, `false`, `none`, `normal`, or `default` for the default text-focus-in animation. Available styles to modify the animation are: `expand` (or `grow`), `forwards` (or `forward`, `fwd`), `contract` (or `shrink`), and `backwards` (or `backwards`, `back`, `bck`).	`String` or `Bool`	`'default'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.9s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. If no specific function is passed, the mixin will choose the best custom timing function for the given style.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}
Invalid $style value of #{meta.inspect($style)} used for

Requires

[function] equals-false
[function] is-alias
[function] is-color
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-glitch

@mixin text-glitch($duration: 0.5s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $has-shifts: true, $use-margin: false, $anim-num: null) { ... }

Description

Animates text by making it appear to be glitching in and out.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.5s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null timing function will cause the CSS default timing-function of `ease`.	`Timing-function`	`null`
`$has-shifts`	If true, the animation will have side-to-side position shifts.	`Bool`	`true`
`$use-margin`	If true, the animation keyframes will use the `margin-left` property instead of the `left` property to create the glitch animation sideways shifts, If $no-shifts is true, $use-margin has no effect.	`Bool`	`false`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] is-alias
[function] is-color
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-pop-shadow

@mixin text-pop-shadow($direction: 'bottom-left', $duration: 0.6s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Animates text by popping forward out from a shadow.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the shadow will be facing. Recommended to use this mixin with the animation-stage mixin or just the perspective property on the parent element.	`String`	`'bottom-left'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.6s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. Default value of null will be the default CSS timing-function propertiy's value of ease.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $shadow-color value of [ #{meta.inspect($shadow-color)} ]
Invalid direction value of #{meta.inspect($direction)} for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] equals-false
[function] is-alias
[function] is-color
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-pop-up

@mixin text-pop-up($direction: 'top', $duration: 0.5s, $delay: null, $timing-func: cubic-bezier(0.25, 0.46, 0.45, 0.94), $shadow-color: hsl(0 0% 80%), $infinite: null, $anim-num: null) { ... }

Description

Applies a text pop-up animation with a shadow effect to a given element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the animation will appear to be going in. Accepted $direction values are: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`, and all valid aliases for these $direction values.	`String`	`'top'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.5s`
`$delay`	The duration of the optional delay of the animation (`s` or `ms`).	`Number`	`null`
`$timing-func`	The timing function for the animation.	`Timing-function`	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`
`$shadow-color`	The color of the shadow used in the effect. Leave this value blank for the default color unless you want something less subtle.	`Color`	`hsl(0 0% 80%)`
`$infinite`	If any value other than `null` or `false` is passed, the `infinite alternate` values will be applied to the animation.	`Bool`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $direction value of #{meta.inspect($direction)} for
Invalid $duration value of #{$duration} for the [ text-pop-up() ]
Invalid delay value of #{meta.inspect($delay)} for the

Requires

[function] equals-false
[function] is-alias
[function] is-color
[function] is-falsey
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-tracking-in

@mixin text-tracking-in($expand-contract: 'expand', $animate-in-place: true, $origin: null, $duration: 0.9s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: cubic-bezier(0.215, 0.61, 0.355, 1), $anim-num: null) { ... }

Description

Animates text by tracking it into view. It is recommended to use the animation-stage() mixin on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$expand-contract`	Determines whether the text will `expand` (or `grow` or `true`) or `contract` (or `shrink` or `false`) as it animates.	`Bool` or `String`	`'expand'`
`$animate-in-place`	If true, the animation will animate in its location on a 2-dimaensional plane. If false, it will allow the animation to track in from the origin, appearing to move forwards on an `expand` animation, and to move backwards on `contract` animations.	`Bool`	`true`
`$origin`	The origin the animation appears to be animating in from. Can be `null`, `top`, or `bottom`.	`String`	`null`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.9s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. Using the default is recommended.	`Timing-function`	`cubic-bezier(0.215, 0.61, 0.355, 1)`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $origin value of #{meta.inspect($origin)} for the
Invalid $animate-in-place value of
Invalid $duration value of #{$duration} for the [ text-tracking-in() ]
Invalid delay value of #{meta.inspect($delay)} for the [ text-tracking-in() ]
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

text-tracking-out

@mixin text-tracking-out($expand-contract: 'contract', $animate-in-place: true, $destination: null, $duration: 0.9s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: cubic-bezier(0.55, 0.085, 0.68, 0.53), $anim-num: null) { ... }

Description

Animates text by tracking it out of view. It is recommended to use the animation-stage() mixin on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$expand-contract`	Determines whether the text will, `expand` (or `grow` or `true`) or `contract` (or `shrink` or `false`) as it animates.	`Bool` or `String`	`'contract'`
`$animate-in-place`	If true, the animation will animate in its location on a 2-dimaensional plane. If false, it will allow the animation to track towards the $destination, appearing to move forwards on an `expand` animation, and to move backwards on `contract` animations.	`Bool`	`true`
`$destination`	The destination the animation appears to be expanding or contracting towards. Can be `null`, `top`, or `bottom`.	`String`	`null`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.9s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. Using the default is recommended.	`Timing-function`	`cubic-bezier(0.55, 0.085, 0.68, 0.53)`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid destination value of #{meta.inspect($destination)} for
Invalid $animate-in-place value of #{meta.inspect($animate-in-place)}
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir} for the

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

twister

@mixin twister($in-or-out: 'in', $direction: 'top', $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates a twister animation that twists an element in or out, from or towards a given direction. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will twist 'in' (`in`, `true`, or `i`) or 'out' (`out`, `false`, or `o`).	`String` or `Bool`	`'in'`
`$direction`	Will either twist in from this direction or twist out towards this direction, depending on the value of $in-or-out. The value of $direction must be one of the following: `top`, `bottom`, or any valid aliases for these $direction values.	`String`	`'top'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `ease-out` on a twister-in animation, and `ease-in` on a twister-out animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for
Invalid $direction of #{meta.inspect($direction)} chosen for
You must pass a $direction for the [ twister() ] mixin. The
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

vanish

@mixin vanish($in-or-out: 'in', $direction: 50%, $duration: 1s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that vanishes an element in or out. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will vanish `in` (or `i` or `true`) or `out` (or `o`, or `false`).	`String` or `Bool`	`'in'`
`$direction`	Resolves to the value for the `transform-origin` property used in the keyframes of the animation. Almost any value that is valid for `transform-origin` is valid here, along with many aliases. If you pass a direction keyword (`top`, `top right`, `right` `bottom right`, `bottom`, `bottom left`, `left,` `top left`, `center`) that value corresponds to the direction the animation appears to be moving in from or out towards. In this way, passing keyword direction is almost as if you are setting a "transform-destination" property. You can also directly pass 1, 2, or 3 value syntax that will be used directly for the `transform-origin` property on the animation's keyframes. Does not accept CSS global values due to being used in the keyframes, not on the selector itself.	`String` or `Number` or `List`	`50%`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`1s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will cause the animation to render according to the CSS default timing function value of `ease`;	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for the
#{$trans-error-start} The transform-origin property only
#{$trans-error-start} When using the 3-value syntax with the
#{$trans-error-start} Horizontal axis for this property
#{$trans-error-start} Vertical axis for this property
#{$trans-error-start} When using the #{$num-origin-vals}
Invalid keyword value for $direction passed to the [ vanish() ]
Invalid $duration value of #{$duration} for the [ vanish() ]
Invalid $duration value of #{$duration} for the [ vanish() ] mixin.
Invalid delay value of #{meta.inspect($delay)} for the [ vanish() ] mixin.
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] is-falsey
[function] is-falsey
[function] equals-false
[function] equals-true
[function] is-alias
[function] is-global-value
[function] is-length
[function] is-number
[function] is-position
[function] is-string
[function] is-list
[function] list-to-string

wiggle

@mixin wiggle($duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an attention-grabbing animation that brings an element forward and wiggles it. It is recommended that the animation-stage() mixin be used on the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `ease-out` on a wiggle-in animation, and `ease-in` on a wiggle-out animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $duration value of #{meta.inspect($duration)} for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{meta.inspect($anim-dir)}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

wobble

@mixin wobble($direction: 'bottom', $duration: 0.8s, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Adds a wobble animation to a given element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The base from which the wobble is generated. Takes 'top`,`left`,`right`, or`bottom`.	`String`	`'bottom'`
`$duration`	The duration of the animation (`s` or `ms`).	`Number`	`0.8s`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. The default of null will set it to the default timing function of ease.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $direction of #{meta.inspect($direction)} for the
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the [ wobble() ]
Invalid $iterations value of #{meta.inspect($iterations)} for
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

zoom

@mixin zoom($in-or-out: 'in', $direction: 'center', $duration: null, $delay: null, $iterations: null, $anim-dir: null, $timing-func: null, $anim-num: null) { ... }

Description

Generates an animation that zooms an element in or out, from or towards a given direction.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$in-or-out`	Determines if the element will zoom 'in' (`in`, `true`, or `i`) or 'out' (`out`, `false`, or `o`).	`Bool` or `String`	`'in'`
`$direction`	Will either zoom in from this direction or zoom out towards this direction, depending on the value of $in-or-out. The value of $direction must be one of the following: `center`, `top`, `right`, `bottom`, `left`, or any valid aliases for these $direction values.	`String`	`'center'`
`$duration`	The duration of the animation (`s` or `ms`)	`Number`	`null`
`$delay`	The optional delay time for the animation.	`Number`	`null`
`$iterations`	The number of iterations to complete. Sets the value for the `animation-iteration-count` property. Can be `infinite`, any unitless number, or any CSS global value.	`Number` or `String`	`null`
`$anim-dir`	Sets the value for the `animation-direction` property. Can be `normal`, `reverse`, `alternate`, or `alternate-reverse`. Can also be any CSS global value. Default of `null` assumes the CSS property default of `normal`.	`String`	`null`
`$timing-func`	The timing function for the animation. A null value passed here will default to the recommended timing function for this animation of `ease-out` on a zoom-in animation, and `ease-in` on a zoom-out animation.	`Timing-function`	`null`
`$anim-num`	If the mixin is used more than once with different values in a stylesheet, you can pass a number or string to the mixin here that gets appeneded to end of the animation name so that the animations do not overwrite each other.	`Number` or `String`	`null`

Throws

Invalid $in-or-out value of #{meta.inspect($in-or-out)} for
Invalid direction of #{meta.inspect($direction)} chosen for
You must pass a $direction for the [ zoom() ] mixin. The
Invalid $duration value of #{meta.inspect($duration)} for the
Invalid delay value of #{meta.inspect($delay)} for the
Invalid $iterations value of #{meta.inspect($iterations)}
Invalid animation-direction value of #{$anim-dir}

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-falsey
[function] is-global-value
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

shapes

mixins

arrow-curved-tail

@mixin arrow-curved-tail($direction: 'bottom-right', $size: 2rem, $color: #f00) { ... }

Description

Uses psuedo-elements and transform to turn an element into the shape of an arrow with a curved tail.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction that the arrow is pointing. Value can either be a an angle (in degrees, turns, radians, gradians) or a direction with one of the following values: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`. Alias values for these direction keywords are also accepted.	`String` or `Number`	`'bottom-right'`
`$size`	The size of the arrow is calculated based on this value.	`Number`	`2rem`
`$color`	The color of the arrow.	`Color`	`#f00`

Throws

Invalid unit type for the $direction parameter of the
Invalid $direction value for the [ arrow-curved-tail() ] mixin.
You did not pass a $direction value for the [ arrow-curved-tail() ]

Requires

[function] conv-angle
[function] is-alias
[function] is-angle
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

arrow

@mixin arrow($direction: right, $size: null, $bg: #80f, $height: $size) { ... }

Description

Uses clip path to change an element to the shape of an arrow.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the arrow is pointing. Accepted values are: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, `top-left`, `forwards`, `backwards`, and all valid aliases for these $direction values.	`String`	`right`
`$size`	The size of the arrow. If the $height property is not set explicitly, it is both height and width, if $height is set explicitly, then this value sets only the width.	`Number`	`null`
`$bg`	The color or background value.	`Color` or `Mixed`	`#80f`
`$height`	The height of the arrow.	`Number`	`$size`

Throws

Invalid $direction keyword of #{meta.inspect($direction)} for
Invalid $direction value of #{meta.inspect($direction)} for the

Requires

[function] is-alias
[function] is-angle
[function] is-list
[function] is-string
[function] list-to-string

banner

@mixin banner($banner-size: 1, $font-size: 1em, $bg-color: #80f, $content-suffix: '-content') { ... }

Description

Creates an old-timey banner shape for headers. Apply the banner to a header element and include an inner inline element for the header's content that has a class name matching the outer element but with the suffix passed to this function with $content-suffix.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$banner-size`	A unitless number value used to calculate the overall size of the banner.	`Number`	`1`
`$font-size`	The font-size of the banner text.	`Number`	`1em`
`$bg-color`	The background color for the banner.	`Color`	`#80f`
`$content-suffix`	The suffix that is added to the class name that this mixin is applied to, representing the internal inline class that contains the banner's text content.	`String`	`'-content'`

Example

<h1 class="banner"><strong class="banner-content">HEADER</strong></h1>

Throws

Invalid $banner-size value for the [ banner() ] mixin. You must

bevel

@mixin bevel($size: null, $bg: null, $height: $size) { ... }

Description

Uses clip path to change an element to an octagonal beveled shape

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The size of the shape. If the $height property is not set explicitly, it is both height and width, if $height is set explicitly, then this value sets only the width.	`Number`	`null`
`$bg`	The color or background value.	`Mixed`	`null`
`$height`	The height of the shape.	`Number`	`$size`

chevron

@mixin chevron($direction: 'right', $size: 15rem, $bg: #80f, $height: $size) { ... }

Description

Uses clip path to change an element to the shape of a chevron arrow

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the chevron is pointing. Valid direction values are: `top`, `right`, `bottom`, and `left`.	`String`	`'right'`
`$size`	The size of the chevron. If the $height property is not set explicitly, it is both height and width,	`Number`	`15rem`
`$bg`	The color or background value. if $height is set explicitly, then this value sets only the width.	`Color` or `Mixed`	`#80f`
`$height`	The height of the chevron.	`Number`	`$size`

Throws

Invalid $direction unit type of #{math.unit($direction)}
Invalid $direction value of #{meta.inspect($direction)} for

Requires

[function] is-angle
[function] closest-position
[function] conv-angle
[function] is-alias
[function] is-number
[function] is-string

circle

@mixin circle() { ... }

Description

Turns the element into a circle.

Parameters

None.

cross

@mixin cross($size: 15rem, $bg: #80f) { ... }

Description

Uses clip path to change an element to a Christian cross shape.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The height and width.	`Number`	`15rem`
`$bg`	The color or background value	`Color` or `Mixed`	`#80f`

diamond

@mixin diamond($size: 15rem, $bg: #80f, $height: $size) { ... }

Description

Uses clip path to change an element to a diamond rhombus shape.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The size of the shape. If the $height property is not set explicitly, it is both height and width, if $height is set explicitly, then this value sets only the width.	`Number`	`15rem`
`$bg`	The color or background value.	`Color` or `Mixed`	`#80f`
`$height`	The height of the shape.	`Number`	`$size`

frame

@mixin frame($bg: #80f, $size: 15rem, $height: $size) { ... }

Description

Uses clip path to cut out the center of an element and leave a border frame. Among other things, you can use this mixin as the child element to an image element or an element with an image background to frame the parent element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$bg`	The color or background value.	`Color` or `Mixed`	`#80f`
`$size`	The size of the frame. If the $height property is not set explicitly, it is both height and width, if $height is set explicitly, then this value sets only the width.	`Number`	`15rem`
`$height`	The height of the frame.	`Number`	`$size`

Throws

Invalid $direction value

heart

@mixin heart($size: 15rem, $bg: #f00) { ... }

Description

Uses psuedo-elements and transform to change an element to the shape of a heart.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	Calcule the size of the element based off of this number. The element will be this amount in width and 90% of this amount in height.	`Number`	`15rem`
`$bg`	The color or background value.	`Color` or `Mixed`	`#f00`

hexagon

@mixin hexagon($size: 15rem, $bg: #80f) { ... }

Description

Uses clip path to change an element to the shape of a hexagon.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The height and width of the element.	`Number`	`15rem`
`$bg`	Can be any value that is valid for the background shorthand property.	`Color` or `Mixed`	`#80f`

infinity-symbol

@mixin infinity-symbol($size: 60px, $symbol-color: #000, $rad-val: 50px) { ... }

Description

Creates an infinity symbol out of an element, better browser support than clip-path.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	A single value used to generate the height and width of the symbol.	`Number`	`60px`
`$symbol-color`	The color of the symbol.	`Color` or `Mixed`	`#000`
`$rad-val`	The border-radius value that creates the infinity shape. Can be altered to mutate the shape.	`Number`	`50px`

Requires

[function] to-fixed

octagon

@mixin octagon($size: 15rem, $bg: #8b0000) { ... }

Description

Uses clip path to change an element to the shape of an octagon.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The height and width of the element.	`Number`	`15rem`
`$bg`	Can be any value that is valid for the background shorthand property.	`Color` or `Mixed`	`#8b0000`

point

@mixin point($direction: 'right', $size: 15rem, $bg: #80f, $height: $size) { ... }

Description

Uses clip path to change an element to the shape of a pentagonal arrow point.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	The direction the arrow is pointing. Accepted values for $direction are: `top`, `top-right`, `right,` `bottom-right`, `bottom`, `bottom-left`, `left,` and `top-left`.	`String`	`'right'`
`$size`	The size of the arrow. If the $height property is not set explicitly, it sets both height and width, if $height is set explicitly, then this value sets only the width.	`Number`	`15rem`
`$bg`	The color or background value.	`Color` or `Mixed`	`#80f`
`$height`	The height of the arrow.	`Number`	`$size`

Throws

Invalid data type for $direction of
Invalid direction of #{meta.inspect($direction)} for the
You must choose a $direction for the [ point() ] mixin.

Requires

[function] is-alias
[function] is-string

pointing-label

@mixin pointing-label($direction: 'right', $width: 8rem, $Any, $b-radius:: 8px, $height: $width / 4) { ... }

Description

Creates a little pointing label from an element using clip-path.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	Indicates the direction the label will be pointing towards. Accepted values are: `top`, `right`, `bottom`, and `left`.	`String`	`'right'`
`$width`	A length value setting the width.	`Number`	`8rem`
`$Any`	value that is valid for the background shorthand property.	`Color` or `Mixed} $bg [#80f`	— none
`$b-radius:`	A single value border radius for the corners on the opposite side of the label from the direction it is pointing.	`Number`	`8px`
`$height`	Length value that sets the height of the label.	`Number`	`$width / 4`

Throws

Invalid $direction value of #{meta.inspect($direction)}

Requires

[function] is-alias
[function] is-string
[function] to-fixed

price-tag

@mixin price-tag($bg: #80f, $padding: 2rem 3rem 2rem 4rem) { ... }

Description

Uses clip path to change an element to the shape of a price tag.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$bg`	Can be any value that is valid for the background shorthand property.	`Color` or `Mixed`	`#80f`
`$padding`	Sets the size of the price tag by setting its padding shorthand property.	`Length` or `List`	`2rem 3rem 2rem 4rem`

shape-shadow

@mixin shape-shadow($shadow-color: rgba(50, 50, 0, 0.5), $shadow-vals: -1px 6px 3px, $turn-off: false) { ... }

Description

Use on the wrapper for an element with the a clip-path effect applied and it will add a drop shadow to the clipped shape.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$shadow-color`	The shadow's color that will be passed to the filter property's drop-shadow function.	`Color`	`rgba(50, 50, 0, 0.5)`
`$shadow-vals`	The values passed before the color in the drop-shadow function that is used with the `filter` property.	`List`	`-1px 6px 3px`
`$turn-off`	Pass true to turn off the drop-shadow effect with `filter: none`.	`Bool`	`false`

Throws

Invalid $shadow-color value of #{meta.inspect($shadow-color)}
Invalid parameter of #{meta.inspect($shadow-vals)} passed as

Requires

[function] is-list
[function] conv-color-name
[function] is-color
[function] is-string
[function] is-true
[function] is-valid-hex

speech-bubble

@mixin speech-bubble($size: 15rem, $bg: #80f, $height: $size) { ... }

Description

Uses clip path to change an element to the shape of a square speech bubble.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The size of the shape. If the $height property is not set explicitly, it is both height and width, if $height is set explicitly, then this value sets only the width.	`Number`	`15rem`
`$bg`	The color or background value.	`Color` or `Mixed`	`#80f`
`$height`	The height of the shape.	`Number`	`$size`

star-six-pointed

@mixin star-six-pointed($size: 15rem, $color: #80f) { ... }

Description

Uses the ::after psuedo-class and borders to turn an element into a six-pointed star.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The size of the star.	`Number`	`15rem`
`$color`	The color of the star.	`Color`	`#80f`

Throws

Invalid $color value passed to the [ star-six-pointed() ] mixin.

star

@mixin star($size: 15rem, $bg: #80f) { ... }

Description

Uses clip path to change an element to a star shape

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The height and width.	`Number`	`15rem`
`$bg`	The background property value.	`Color` or `Mixed`	`#80f`

triangle

@mixin triangle($direction: 'bottom', $size: 9px, $color: #80f) { ... }

Description

Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a &::before or &::after selector, to attach the triangle to an existing element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	Direction that the triangle points. Can be `top`, `right`, `bottom`, or `left`.	`String`	`'bottom'`
`$size`	The width of the triangle.	`Number`	`9px`
`$color`	The color of the triangle.	`Color`	`#80f`

Throws

Invalid direction of #{meta.inspect($direction)} for the

Requires

[function] is-alias
[function] is-string

x-shape

@mixin x-shape($size: 15rem, $bg: #80f) { ... }

Description

Uses clip path to change an element to the shape of a thick X.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The height and width of the shape.	`Number`	`15rem`
`$bg`	The color or background value.	`Color` or `Mixed`	`#80f`

General

mixins

gradient-stripes

@mixin gradient-stripes($direction, $colors) { ... }

Description

Generates a stripe gradient with a direction and a list of colors.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	Gradient direction	`Direction`	— none
`$colors`	List of colors	`List`	— none

Output

background-image: linear-gradient() if $colors contains mulitple colors, background-color: $colors if only one color is passed.

utilities

functions

[private] _asset

@function _asset($type, $file) { ... }

Description

A simply asset file location builder.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$type`	Asset type, matching folder name	`String`	— none
`$file`	Asset file name, including extension	`String`	— none

Returns

String —

A file location leading to the asset.

Requires

[variable] asset-base-path

Used by

[function] image
[function] font

image

@function image($file) { ... }

Description

Image asset helper. Returns the full relative file path for the image.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$file`	The image file name, including extension.	`String`	— none

Returns

String —

The relative file location leading to the image.

Requires

[function] _asset

font

@function font($file) { ... }

Description

Font asset helper. Returns the full relative file path for the font.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$file`	The font file name, including extension.	`String`	— none

Returns

String —

The relative file location leading to the font.

Requires

[function] _asset

Used by

[mixin] font

black

@function black($opacity: 1) { ... }

Description

Mixes black with a given opacity level.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$opacity`	An opacity level between either 0 and 1 or 0% and 100%, inclusive.	`Number`	`1`

Returns

Color —

The black color at the given opacity level.

Throws

Invalid data type for $opacity passed to the [ black() ]
Invalid $opacity unit type of \
Invalid $opacity level of #{meta.inspect($opacity)} passed to the

Used by

[mixin] text-drop-shadow

bottom-shadow

@function bottom-shadow($depth, $color: #000, $intensity: 1) { ... }

Description

Computes the bottom shadow for a Material Design depth effect. Used by the depth-level() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$depth`	The shadow effect's depth level.	`Number`	— none
`$color`	The color of the shadow effect.	`Color`	`#000`
`$intensity`	An optional value that is multiplied with the default color opacity to increase or decrease the intensity of the effect.	`Number`	`1`

Returns

List —

Computed values for the bottom-shadow

Used by

[mixin] depth-level

See

[mixin] depth-level

char-at

Since 0.17.0

@function char-at($string, $index) { ... }

Description

Return character from $string at $index.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	The String to check.	`String`	— none
`$index`	The index to find the character.	`String`	— none

Returns

String or Null —

The character from $string at $index. Returns null if the String is empty or if index` exceeds the range of the length of the String.

Requires

[function] is-true
[function] list-to-string

clamp-val

@function clamp-val($min, $value, $max) { ... }

Description

Clamps $value between $min and $max. Because the CSS version of clamp() still does not have full support for all Safari versions in use, this version will provide the same effect with the more supported min() and max() methods but with the more simplified clamp() syntax that is the same as in the CSS version.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$min`	The minimum value.	`Number`	— none
`$value`	The number to clamp between $min and $max.	`Number`	— none
`$max`	The maximum value.	`Number`	— none

Returns

Calculation —

If $value is within the limits, returns the $value, if it is below the limit of $min, it will return $min, if it is above the limit of $max, it will return $max.

Throws

Invalid $min and $max value of [ $min: #{$min}, $max: #{$max} ]

Requires

[function] is-number

closest-direction

@function closest-direction($angle, $return-difference: false) { ... }

Description

Takes an angle and returns the closest direction keyword as an unquoted string. If $return-difference is set to true, it will return a comma separated list with the keyword first and then the difference in degrees between that and the given angle.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$angle`	An angle in any format or a unitless number which the function will assume to be in degrees.	`Number`	— none
`$return-difference`	Pass `true` to have the function return a list with the keyword and the difference in degrees between that direction and the given angle. Pass `false` or `null` to have the function return an unquoted string with just the closest direction keyword.	`Bool`	`false`

Returns

String or List —

Returns an unquoted string with the closest direction keyword. If $return-difference is set to true, it will instead return a list with the keyword first and then the difference in deg between that direction and the given angle.

Example

.element {
  transition-origin: closest-direction(243grad);
}
// Compiles to...
.element {
  transition-origin: bottom left;
}

Throws

Invalid data type for $angle passed to the [ closest-direction ]
You must provide a valid $angle for the [ closest-direction() ]

Requires

[function] equals-true
[function] is-angle
[function] is-number
[function] conv-angle
[variable] map-directions

Used by

[function] closest-position

closest-position

@function closest-position($angle, $return-difference: false) { ... }

Description

Takes an angle and returns the closest position keyword (top, right, bottom, or left) as an unquoted string. If $return-difference is set to true, it will return a comma separated list with the keyword first and then the difference in degrees between that and the given angle.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$angle`	An angle in any format or a unitless number which the function will assume to be in degrees.	`Number`	— none
`$return-difference`	Pass `true` to have the function return a list with the keyword and the difference in degrees between that direction and the given angle. Pass `false` or `null` to have the function return an unquoted string with just the closest position keyword.	`Bool`	`false`

Returns

String or List —

Returns an unquoted string with the closest position keyword (top, right, bottom, or left). If $return-difference is set to true, it will instead return a list with the keyword first and then the difference in deg between that position and the given angle.

Example

.element {
  #{closest-position(288deg)}: 20%;
}
// Compiles to...
.element {
  left: 20%;
}

Throws

Invalid data type for $angle passed to the [ closest-direction ]
You must provide a valid $angle for the [ closest-direction() ]

Requires

[function] closest-direction
[function] equals-true
[function] is-angle
[function] is-number
[function] conv-angle
[variable] map-positions

Used by

[mixin] chevron

color-complement

@function color-complement($color, $syntax: get-color-type($color)) { ... }

Description

Takes a given color and gives its complement in the specified color syntax. This extends the functionality of Sass' color.complement and is the equivalent of doing color.adjust($color, $hue: 180deg) while being able to choose the output color format.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to find the complement. Must be a color type recognized by Sass.	`Color`	— none
`$syntax`	The desired syntax of the returned color. Defaults to the color notation used by `$color`.	`String`	`get-color-type($color)`

Returns

Color —

The color's complement in the given syntax.

Throws

Invalid $color data type of #{meta.inspect(meta.type-of($color))}
Invalid $sytax data type of #{meta.type-of($syntax)} passed to
Invalid $syntax value of #{meta.inspect($syntax)} passed to

Requires

[function] conv-color
[function] get-color-type
[function] is-color
[function] is-string

Used by

[function] complement-color
[function] color-contrast
[function] color-contrast
[function] color-text-contrast

complement-color

@function complement-color($color, $syntax: get-color-type($color)) { ... }

Description

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to find the complement. Must be a color type recognized by Sass.	`Color`	— none
`$syntax`	The desired syntax of the returned color. Defaults to the color notation used by `$color`.	`String`	`get-color-type($color)`

Returns

Color —

The color's complement in the given syntax.

Throws

Invalid $color data type, must be a color.
Invalid $syntax data type, must be a string.
Invalid $syntax value, must be a color syntax string.

Requires

[function] color-complement
[function] conv-color
[function] get-color-type
[function] is-color
[function] is-string

color-contrast

Since 0.9.0

@function color-contrast($color, $syntax: get-color-type($color)) { ... }

Description

Takes a given color and finds a complementary color that contrasts well with the given color such that they will look good together. Allows you to choose the desired syntax of the returned color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to find a contrast for. Must be a color type recognized by Sass.	`Color`	— none
`$syntax`	The desired syntax of the returned color. Defaults to the color notation used by `$color`.	`String`	`get-color-type($color)`

Returns

Color —

The contrasting color in the given syntax.

Throws

Invalid $color data type of #{meta.inspect(meta.type-of($color))}
Invalid $sytax data type of #{meta.type-of($syntax)} passed to
Invalid $syntax value of #{meta.inspect($syntax)} passed to

Requires

[function] color-complement
[function] color-complement
[function] conv-color
[function] get-color-type
[function] is-color
[function] is-string

Used by

[function] color-text-contrast
[function] color-text-contrast

color-invert

Since 0.9.0

@function color-invert($color, $weight: 100%, $syntax: get-color-type($color)) { ... }

Description

Takes a given color and inverts it then converts it to a specified color syntax.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to invert.	`Color`	— none
`$weight`	How much to invert the color. Must be a percentage between 0% and 100% inclusive.	`Number`	`100%`
`$syntax`	The desired syntax of the returned color. Defaults to the color notation used by $color.	`String`	`get-color-type($color)`

Returns

Color —

The inverted color in the given syntax.ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc

Throws

Invalid $color data type of #{meta.inspect(meta.type-of($color))}
Invalid $weight value of #{meta.inspect($weight)} passed to
Invalid $sytax data type of #{meta.type-of($syntax)} passed to
Invalid $syntax value of #{meta.inspect($syntax)} passed to

Requires

[function] is-percentage
[function] conv-color
[function] get-color-type
[function] is-color
[function] is-string

color-text-contrast

@function color-text-contrast($color, $syntax: get-color-type($color)) { ... }

Description

Determines whether to return a light or dark contrast color for text based on the given background color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color you are finding the contrast for. Must be a color type recognized by Sass.	`Color`	— none
`$syntax`	The desired syntax of the returned color. Defaults to the color notation used by `$color`. Can be 'hex', '#', 'rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'function', 'name', or 'cmyk'.	`String`	`get-color-type($color)`

Returns

Color —

The contrast color in the given syntax.

Throws

Invalid $color data type of #{meta.inspect(meta.type-of($color))}
Invalid $sytax data type of #{meta.type-of($syntax)} passed to
Invalid $syntax value of #{meta.inspect($syntax)} passed to

Requires

[function] color-contrast
[function] color-contrast
[function] color-complement
[function] conv-color
[function] get-color-type
[function] is-color
[function] is-string
[variable] text-contrast-threshold
[variable] contrast-text-dark
[variable] contrast-text-light

color-to-string

@function color-to-string($color) { ... }

Description

Converts a color into a string representation of that color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to convert into a string.	`Color`	— none

Returns

String —

A color value wrapped inside a string.

Throws

Invalid $color data type warning.

Used by

[function] get-color-type

conv-angle

@function conv-angle($angle, $convert-to: 'deg') { ... }

Description

Takes a given $angle in either turns (turn), degrees (deg), gradians (grad), or radian (rad) units, and converts that angle into an alternate unit type defined by $convert-to.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$angle`	An angle value. Can be in turn, deg, grad, or rad units. Can also be a keyword string with one of the following values: `top`, `top-right`, `right`, `bottom-right`, `bottom`, `bottom-left`, `left`, or `top-left`.	`Number` or `String`	— none
`$convert-to`	The type of angle notation the given $angle should be converted to.	`String`	`'deg'`

Returns

Number —

The converted angle.

Throws

Invalid $angle unit type passed to the [ conv-angle() ] function.
Invalid $angle keyword passed to the [ conv-angle() ] function.
Invalid $angle data type of #{meta.inspect(meta.type-of($angle))}
Invalid data type of #{meta.inspect(meta.type-of($convert-to))}
Invalid $convert-to unit name passed to the [ conv-angle() ]

Requires

[function] is-alias
[function] is-angle
[function] is-number
[function] is-string
[function] strip-unit
[function] pi

Used by

[mixin] arrow-curved-tail
[mixin] chevron
[function] closest-direction
[function] closest-position

conv-color-name

@function conv-color-name($color-name, $color-map: $map-color-names) { ... }

Description

If the given $color value is a valid CSS color name, returns the associated 3 or 6 digit hex value. Otherwise, returns the same color.

Some duplicate color names are not allowed and will not be able to be converted. Those include all color names with the British spelling of grey (in favor of gray), cyan (in favor of aqua), and magenta (in favor of fuchsia). Colors that were chosen over their aliases were chosen due to what Sass outputs from color module methods.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color-name`	The CSS color name to be converted.	`Color`	— none
`$color-map`	The map containing all the CSS colors and their hex values.	`Map`	`$map-color-names`

Returns

Color —

If the $color-name provided is a valid CSS color, returns the corresponding 3 or 6 digit hex color value. Otherwise, returns the same color.

Throws

Invalid $color-name provided to the [ conv-color-name() ] function

conv-color

@function conv-color($color, $syntax: hsla) { ... }

Description

Takes a given color in virtually any notation and converts it into the given color syntax types. Available notations are hex, rgb, rgba, hsl, hsla, hwb, name, function, or cmyk. Passing 'name' will only return a CSS color name if the given $color can can be converted into one, otherwise it returns a hex. Alpha is disregarded for this syntax selection, unless the alpha is 0 which will convert the color into the CSS color name transparent.

Some of the colors this function returns cannot be used in Sass functions that make use of the color module or type checking as Sass currently currently recognizes them as strings. This will hopefully be fixed in future versions of Sass. The exception to this are $syntx values of rgba, name (omits any provided alpha and returns either the CSS color name or or 6 digit hex), function (returns a 3 or 6 digit hex, or rgba if there is an alpha value to $color), and rgb or hsl (when there is no alpha value or an alpha value of 1 in $color). If you want to use conv-color() inside a function, it is recommended to pass function for the $syntax value, as it is guaranteed to work in the most places. However, all the colors returned by this function will work perfectly as CSS values.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to convert.	`Color`	— none
`$syntax`	The color syntax to convert into. Can be `hex`, `rgb`, `rbga`, `hsl`, `hsla`, `hwb`, `function`, `name`, or `cmyk`.	`String`	`hsla`

Returns

Color or String —

The converted color in the given syntax.

Throws

Invalid data type passed to [ conv-color() ] function. You passed
Invalid value of [ #{meta.inspect($syntax)} ] passed to
Invalid $syntax value of [ #{$syntax} ] passed to

Requires

[function] conv-color-name
[function] strip-unit
[function] to-cmyk
[function] to-hex
[function] to-fixed

Used by

[function] color-complement
[function] complement-color
[function] color-contrast
[function] color-invert
[function] color-text-contrast
[mixin] depth-level
[mixin] gradient
[mixin] text-emboss

conv-to-em

@function conv-to-em($pixels, $base: null) { ... }

Description

Converts a pixel value into em units (based on the root font-size). Unitless values are assumed to be in pixels.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$pixels`	A value to convert to em units.	`Number`	— none
`$base`	The contextual base font-size.	`Number`	`null`

Returns

Number —

The value in em units.

Throws

Invalid value of [ #{meta.inspect($pixels)} ] passed to the

Requires

[function] strip-unit
[function] is-number
[variable] base-font-size

Used by

[mixin] only-between-widths
[mixin] only-between-widths
[mixin] only-over-width
[mixin] only-phones
[mixin] only-under-width

conv-to-px

@function conv-to-px($rems, $base) { ... }

Description

Converts rem value(s) into pixel units. Can be a single value of a List of values. Unitless values are assumed to be in rem units.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$rems`	Values in `rem` units.	`List` or `Number`	— none
`$base`	The base font-size.	`Number`	— none

Returns

List or Number —

The value(s) in pixels px.

Throws

Invalid $rems value of [ #{meta.inspect($value)} ] passed to the

Requires

[function] is-number
[function] is-number
[function] strip-unit
[function] strip-unit
[function] strip-unit
[variable] base-font-size
[variable] base-font-size

conv-to-rem

@function conv-to-rem($values, $base: null) { ... }

Description

Converts $values into rem units. Can be a single value or a list of values. Unitless values are assumed to be in pixels. Default base font size is 16px, but can be changed with the $base-font-size variable.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$values`	The value(s) to convert to `rem` units. Can be a single value or a List containing `px`, `em`, `rem`, `%`, or unitless values.	`Number` or `List`	— none
`$base`	The base font-size. If none specified, defers to the $base-font-size variable. If that is not found, defaults to 16px.	`Number`	`null`

Returns

Number or List —

The value(s) in rem units.

Throws

Invalid $values unit of #{meta.inspect($value)} passed to

Requires

[function] _unit-to-rem
[function] _unit-to-rem
[function] strip-unit
[function] is-number
[variable] base-font-size

Used by

[function] _unit-to-rem
[function] linear-interpolation
[function] trend-line

[private] _unit-to-rem

@function _unit-to-rem($value, $base) { ... }

Description

Converts a value to matching rem value. By default, the base pixel value used to calculate the rem value is taken from the $base-font-size variable.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	Value to convert. Can be `px`, `em`, `%`, or `rem`	`Number`	— none
`$base`	Base for pixel conversion.	`Number`	— none

Returns

Number —

A number in rems, calculated based on the given value and the $base-font-size value. Values in rem are passed through as is. Values of 0rem are passed back without any unit as 0,

Throws

Invalid $value of #{meta.inspect($value)} was passed

Requires

[function] is-number
[function] conv-to-rem
[function] strip-unit

Used by

[function] conv-to-rem
[function] conv-to-rem

entity

@function entity($char-name, $is-coded: true) { ... }

Description

Takes a character or a string representation for the name of a character and returns the CSS entity code for that character.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$char-name`	The character (if it is available on a standard keyboard), name of the character, or an abbreviated name for the character, being converted into a CSS entity code.	`String`	— none
`$is-coded`	If true and by default, the function will return the entity code for the given character as described by $char-name. If false, the function will instead return the compiled character itself.	`Bool`	`true`

Returns

String —

The desired entity code or character wrapped in a string.

entity('&') and entity('amp') both return '\0026' entity('tm', $is-coded: false) returns '™'

Throws

Value of $char-name must be of type
You must enter an accepted character or string for $char-name in

equals-false

@function equals-false($value) { ... }

Description

Returns the whether $value is strictly equal to false, null, or the string equivalent of 'false'.

In Sass, all values other than false and null are considered truthy. Sometimes, you may just want to test only for either the Bool type false or the String equivalent of 'false'.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to check.	`Any`	— none

Returns

Bool —

Returns true if $value is null, false or 'false'.

Used by

[mixin] animation-stage
[mixin] bg-zoom
[mixin] bounce
[mixin] bounciness
[mixin] color-shifter
[mixin] fade
[mixin] flick
[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip
[mixin] hinge
[mixin] pan-wipe
[mixin] ping
[mixin] poof-puff
[mixin] poof
[mixin] power
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] rotate
[mixin] scale-down
[mixin] scale-up
[mixin] slide
[mixin] slit
[mixin] snappiness
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-blur-out
[mixin] text-drop-shadow
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-pop-up
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] wiggle
[mixin] wobble
[mixin] zoom
[function] is-position
[mixin] cover
[mixin] flex-center

equals-true

@function equals-true($value) { ... }

Description

Returns the whether $value is strictly equal to true or the string equivalent of 'true'.

In Sass, all values other than false and null are considered truthy. Sometimes, you may just want to test only for either the Bool type true or the String equivalent of 'true'.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to check.	`Any`	— none

Returns

Bool —

Returns true if $value is true or 'true'.

Used by

[mixin] bounce
[mixin] fade
[mixin] flick
[mixin] hinge
[mixin] ping
[mixin] poof-puff
[mixin] poof
[mixin] power
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] slide
[mixin] slit
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-flicker
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] wiggle
[mixin] zoom
[function] closest-direction
[function] closest-position
[function] is-position
[function] linear-interpolation
[function] list-insert-nth
[function] trend-line
[mixin] cover
[mixin] flex-center
[mixin] gradient
[mixin] reset-text
[mixin] responsive-ratio

every

Since 0.15.0

@function every($list, $func, $mod: null, $args...) { ... }

Description

Tests whether all items from $list pass the test implemented by $func.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to run the test against.	`List`	— none
`$func`	The function to run against every item from $list.	`String`	— none
`$mod`	The module that $func belongs to. If no module and calling a global function, pass `null` or nothing. If calling a plain CSS function, pass `css`.	`String` or `Null`	`null`
`$args`	Optional extra arguments to pass to the function	`Arglist`	— none

Returns

Bool —

Returns true if all items from $list pass the test implemented by $func, otherwise returns false.

Example

every(1 2 3, 'unitless')
// true

every(1 2 3px, 'unitless')
// false

Requires

[function] is-falsey

exp-maclaurin

@function exp-maclaurin($x, $n) { ... }

Description

Complete the Maclaurin exponentiation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$x`	— none	`Number`	— none
`$n`	— none	`Number`	— none

Returns

Number —

The result of the operation.

Requires

[function] factorial

extend-map

@function extend-map($object, $objects..., $deep) { ... }

Description

Designed to improve on the built-in map.merge() (formerly map-merge() functionality so that it is recursive and able to merge more than 2 maps at once.

About map.merge():

only takes 2 arguments
is not recursive

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$object`	First map	`Map`	— none
`$objects`	Other maps	`Arglist`	— none
`$deep`	Optional recursive mode	`Bool`	— none

Returns

Map —

The merged map

Throws

Invalid $object type passed to the [ extend-map() ] function.
Invalid type in $objects passed to the [ extend-map() ] function.
Invalid $deep value of #{meta.inspect($deep)} passed to the

factorial

@function factorial($value) { ... }

Description

Takes a given number and returns the factorial of that number.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	Any given number.	`Number`	— none

Returns

Number —

The factorial of $value.

Used by

[function] exp-maclaurin

fibonacci

Since 0.8.1

@function fibonacci($n, $end: null) { ... }

Description

Calculates the nth Fibonacci number or a range of Fibonacci numbers. This can be used in calculations for a range of possible effects.

If one argument is provided, returns the nth Fibonacci number. If two arguments are provided, returns a list of Fibonacci numbers in the given range.

The function caps at generating Fibonacci numbers up to the 79th in the sequence to avoid exceeding the maximum safe integer value in Dart and JavaScript (2^53 - 1). It is unlikely anyone will need a number anywhere close to that, let alone higher.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$n`	The position in the Fibonacci sequence or the start of the range.	`Number`	— none
`$end`	The end of the range in the Fibonacci sequence (optional).	`Number`	`null`

Returns

Number or List —

The nth Fibonacci number or a list of numbers in the range.

Throws

Invalid input for the [ fibonacci() ] function. Any value passed
The [ fibonnaci() ] function is capped at generating only up to
Invalid input for the [ fibonacci() ] function. The second argument

Requires

[function] is-integer

first-of

Since 0.15.0

@function first-of($value) { ... }

Description

Returns first element of a List or the first property value pair from a map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The List or Map from which to retrieve first element or property/value pair.	`List`	— none

Returns

Any type —

The first element from $value. If $value is a Map, returns the first key/value pair as as a two value, space-separated List.

Example

first-of('a' 'b' 'c')
// 'a'

first-of('a')
// 'a'

first-of(())
// null

Throws

The value passed to the [ first-of() ] function is empty, cannot

Requires

[function] is-empty

Used by

[mixin] first-of

font-stack

@function font-stack($stack, $map) { ... }

Description

Returns the font stack chosen from a font-stack map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$stack`	Name of the font-stack map key.	`String`	— none
`$map`	Map to retrieve a font-stack value from.	`Map`	— none

Returns

List —

Found font-stack value.

functions-walk

@function functions-walk($functions, $args...) { ... }

Description

Return a list made of the result of each function call from $functions with $args.

This function iterates over a list of functions, comprised of their function names as strings, applying each function to the provided arguments, and then collects the results into a new list. This is useful for applying a eries of transformations or calculations to a set of data in a single operation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$functions`	List of function names (as strings) to call.	`List`	— none
`$args`	Extra arguments to pass to each function.	`Arglist`	— none

Returns

List —

The result of the arguments(s) being applied to the list of function(s).

Throws

There is no #{meta.inspect($function)} function available to

get-color-type

@function get-color-type($color) { ... }

Description

Takes a color value and returns a string representing what type of notation is used for the color. Valid types curently include: [ 'hex', 'rgb', 'rgba', 'hsl', 'hsla' ]

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	A color value	`Color`	— none

Returns

String —

The type of notation used for the $color value. Can be 'hex', 'rgb', 'rgba', 'hsl', 'hsla', and any other color currently recognized as being of the 'color' type by Sass.

Throws

Invalid $color value.

Requires

[function] color-to-string
[function] conv-color-name

Used by

[function] color-complement
[function] complement-color
[function] color-contrast
[function] color-invert
[function] color-text-contrast

is-absolute-length

@function is-absolute-length($value) { ... }

Description

Checks if a value is an absolute length.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is an absolute length, false if it is not.

Used by

[function] is-length
[mixin] container

is-alias

@function is-alias($keyword, $alias, $alias-map: $direction-resolution-map) { ... }

Description

Returns true if the given alias is found in the map's list for the given keyword, otherwise returns false.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$keyword`	The name of the keyword.	`String`	— none
`$alias`	The shortcut or alias used for the keyword.	`String`	— none
`$alias-map`	The map of keywords as keys with lists of their aliases as values.	`Map`	`$direction-resolution-map`

Returns

Bool —

Returns true if the given alias is found in the map's list for the given keyword, otherwise returns false.

Throws

Invalid data type of #{meta.type-of($keyword)} for $keyword
Invalid data type of #{meta.type-of($alias-map)} for

Requires

[variable] map-alias-resolutions

Used by

[mixin] animation-back-face
[mixin] animation-stage
[mixin] bg-zoom
[mixin] bounce
[mixin] bounciness
[mixin] color-shifter
[mixin] fade
[mixin] flick
[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip
[mixin] hinge
[mixin] pan-wipe
[mixin] ping
[mixin] poof-puff
[mixin] poof
[mixin] power
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] rotate
[mixin] scale-down
[mixin] scale-up
[mixin] slide
[mixin] slit
[mixin] snappiness
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-blur-out
[mixin] text-drop-shadow
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-pop-up
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] wiggle
[mixin] wobble
[mixin] zoom
[mixin] arrow-curved-tail
[mixin] arrow
[mixin] chevron
[mixin] point
[mixin] pointing-label
[mixin] triangle
[function] conv-angle
[function] is-position
[mixin] bg-image-svg
[mixin] bg-image
[mixin] button-base
[mixin] caret
[mixin] cover
[mixin] child-index
[mixin] child-index
[mixin] flex-center
[mixin] gradient
[mixin] inner-side-shadow
[mixin] resizable

is-angle

@function is-angle($value) { ... }

Description

Checks if a value is an angle.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is an angle, false if it is not.

Used by

[mixin] arrow-curved-tail
[mixin] arrow
[mixin] chevron
[function] closest-direction
[function] closest-position
[function] conv-angle
[mixin] gradient

is-bool

@function is-bool($value) { ... }

Description

Returns whether a given value is of the Sass type bool and is strictly equal to true or false.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

Returns true if $value is a boolean, false if it is not.

Used by

[mixin] responsive-ratio

is-calculation

@function is-calculation($value) { ... }

Description

Checks if a value is a CSS function equation, such as calc(), min(), max(), clamp(), etc.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a calculation, false if it is not.

Used by

[mixin] animation-stage
[mixin] container
[mixin] ghost-button
[mixin] ghost-button
[mixin] text-shadow

is-color

@function is-color($value) { ... }

Description

Checks if a value is a color.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is an color, false if it is not.

Used by

[mixin] text-drop-shadow
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-pop-up
[mixin] shape-shadow
[function] color-complement
[function] complement-color
[function] color-contrast
[function] color-invert
[function] color-text-contrast
[function] conv-color-name
[function] shade
[function] tint
[mixin] text-emboss

is-conventional

@function is-conventional($string, $allow-nums: false, $allow-underscore: false, $allow-capitals: false) { ... }

Description

Checks if a string contains only conventional naming chacters, which includes the 26 character alphabet and the standard hyphen. Has flag parameters that allow for also including numbers, underscores

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	The string to check.	`String`	— none
`$allow-nums`	Whether to allow for number characters in the string.	`Bool`	`false`
`$allow-underscore`	Whether to allow for private or BEM naming conventions, which effectively means adding the underscore '_' character to the list of allowed characters.	`Bool`	`false`
`$allow-capitals`	If true, the function will allow for capital letters. When false, the function will return as false if $string contains capital letter characters.	`Bool`	`false`

Returns

Bool —

True if $string only contians hyphens and lowercase characters from the 26 character alphabet. Will return true for capital letters if $allow-capitals is flagged true, for numbers if $allow-nums is flagged true, and for underscores if $allow-underscore is true. Otherwise returns false.

Requires

[variable] decimal-space

is-empty

Since 0.15.0

@function is-empty($value) { ... }

Description

Tests whether a List or Map is empty.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The List or Map to run the test against. Any other data types are interpreted as single-value lists by the function.	`List` or `Map`	— none

Returns

Bool —

Will return true if $value has a length of 0, otherwise returns false.

Example

is-empty(())
// true

is-empty(a)
// false

Used by

[function] first-of
[function] last-index
[function] last-of
[function] list-to-map

is-falsey

@function is-falsey($value) { ... }

Description

Returns whether $value is "falsey" in a broader sense than by using the not keyword. Doing a conditional such as @if not $var { ... } will only test as true for false and null values in Sass. By using this function like, @if is-falsey($var) { ... }, it will test true for false and null values, but also for empty strings, empty lists, empty maps, the number 0, and the string value of 'false'.

In Sass, empty strings and empty lists are all "truthy" and sometimes you may want to check if something is false in the more traditional sense.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to check.	`Any`	— none

Returns

Bool —

Returns true if $value is falsey (not just null or false).

Used by

[mixin] bg-zoom
[mixin] bounce
[mixin] bounciness
[mixin] color-shifter
[mixin] fade
[mixin] flick
[mixin] flick
[mixin] flip-scale-2
[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip-scale
[mixin] flip
[mixin] flip
[mixin] hinge
[mixin] pan-wipe
[mixin] pan-wipe
[mixin] ping
[mixin] ping
[mixin] poof-puff
[mixin] poof-puff
[mixin] poof
[mixin] poof
[mixin] power
[mixin] power
[mixin] puff
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] rotate
[mixin] scale-down
[mixin] scale-up
[mixin] slide
[mixin] slit
[mixin] snappiness
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-blur-out
[mixin] text-drop-shadow
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-pop-up
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] vanish
[mixin] wiggle
[mixin] wobble
[mixin] zoom
[function] every
[function] list-sort
[function] num-to-ratio
[function] some
[function] to-bool
[mixin] bg-image-svg
[mixin] bg-image
[mixin] text-outline

is-float

@function is-float($value) { ... }

Description

Checks if a value is a floating point (decimal) number.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a float, false if it is not.

is-frequency

@function is-frequency($value) { ... }

Description

Checks if a value is a frequency.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a frequency, false if it is not.

is-global-value

@function is-global-value($value, $global-list: $global-values) { ... }

Description

Detects if a given value is one of the CSS global values that can be used with virutally any CSS property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The value being checked.	`Any`	— none
`$global-list`	The list containing all existing CSS global values.	`List`	`$global-values`

Returns

Bool —

True if the $value is a CSS global value, false otherwise.

Requires

[function] is-string
[variable] global-values

Used by

[mixin] animation-stage
[mixin] bounce
[mixin] bounciness
[mixin] color-shifter
[mixin] fade
[mixin] flick
[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip
[mixin] hinge
[mixin] pan-wipe
[mixin] ping
[mixin] poof-puff
[mixin] poof
[mixin] power
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] rotate
[mixin] scale-down
[mixin] scale-up
[mixin] slide
[mixin] slit
[mixin] snappiness
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-blur-out
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] wiggle
[mixin] wobble
[mixin] zoom
[mixin] clamp-lines
[mixin] flex-center
[mixin] ghost-button
[mixin] position
[mixin] resizable
[mixin] visible

is-integer

@function is-integer($value) { ... }

Description

Checks if a value is an integer.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is an integer, false if it is not.

Used by

[function] fibonacci
[function] list-chunk
[function] list-insert-nth
[function] list-loop
[function] list-range
[function] list-remove-nth
[function] list-replace-nth
[function] list-slice
[function] make-long-shadow
[function] to-fixed
[mixin] clamp-lines
[mixin] depth-level
[mixin] first
[mixin] first-of-type
[mixin] first-of-any
[mixin] last
[mixin] last-of-type
[mixin] last-of-any
[mixin] after-first
[mixin] after-first-of-any
[mixin] from-end
[mixin] between
[mixin] between-any
[mixin] even-between
[mixin] even-between-any
[mixin] odd-between
[mixin] odd-between-any
[mixin] n-between
[mixin] n-between-any
[mixin] all-but
[mixin] each
[mixin] each-of-any
[mixin] from-first-last
[mixin] from-first-last-any
[mixin] middle
[mixin] all-but-first-last
[mixin] all-but-first-last-of-any
[mixin] first-of
[mixin] last-of
[mixin] at-least
[mixin] at-least-any
[mixin] at-most
[mixin] in-between
[mixin] long-shadow

is-length

@function is-length($value) { ... }

Description

Checks if a value is a length.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a length, false if it is not.

Requires

[function] is-relative-length
[function] is-absolute-length

Used by

[mixin] animation-stage
[mixin] flick
[mixin] pan-wipe
[mixin] power
[mixin] vanish
[function] is-position
[mixin] caret
[mixin] container
[mixin] expand-action-area
[mixin] ghost-button
[mixin] inner-side-shadow
[mixin] only-between-widths
[mixin] only-between-widths
[mixin] only-over-width
[mixin] only-under-width

is-list

@function is-list($value) { ... }

Description

Checks if a value is a list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a list, false if it is not.

Used by

[mixin] animation-stage
[mixin] bg-zoom
[mixin] bounce
[mixin] bounce
[mixin] bounciness
[mixin] color-shifter
[mixin] fade
[mixin] flick
[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip
[mixin] hinge
[mixin] pan-wipe
[mixin] pan-wipe
[mixin] ping
[mixin] poof-puff
[mixin] poof
[mixin] power
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] rotate
[mixin] scale-down
[mixin] scale-up
[mixin] slide
[mixin] slit
[mixin] snappiness
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-blur-out
[mixin] text-drop-shadow
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-pop-up
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] wiggle
[mixin] wobble
[mixin] zoom
[mixin] arrow-curved-tail
[mixin] arrow
[mixin] shape-shadow
[function] list-sort
[function] stringify-map-keys
[mixin] caret
[mixin] cover
[mixin] flex-center
[mixin] gradient

is-map

@function is-map($value) { ... }

Description

Checks if a value is a map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a map, false if it is not.

Used by

[function] linear-interpolation
[function] list-insert-nth
[function] list-prepend
[function] list-remove-duplicates
[function] list-replace-nth
[function] list-slice
[function] list-sort
[function] list-to-map
[function] trend-line
[mixin] bg-image-svg
[mixin] bg-image

is-number

@function is-number($value) { ... }

Description

Checks if a value is a number.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a number, false if it is not.

Used by

[mixin] animation-back-face
[mixin] animation-stage
[mixin] bg-zoom
[mixin] bounce
[mixin] bounciness
[mixin] color-shifter
[mixin] fade
[mixin] flick
[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip
[mixin] hinge
[mixin] pan-wipe
[mixin] ping
[mixin] poof-puff
[mixin] poof
[mixin] power
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] rotate
[mixin] scale-down
[mixin] scale-up
[mixin] slide
[mixin] slit
[mixin] snappiness
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-blur-out
[mixin] text-drop-shadow
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-pop-up
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] wiggle
[mixin] wobble
[mixin] zoom
[mixin] arrow-curved-tail
[mixin] chevron
[function] clamp-val
[function] closest-direction
[function] closest-position
[function] conv-angle
[function] conv-to-em
[function] conv-to-px
[function] conv-to-px
[function] conv-to-rem
[function] _unit-to-rem
[function] num-to-ratio
[function] shade
[function] str-to-num
[function] tint
[mixin] bg-image-svg
[mixin] bg-image
[mixin] caret
[mixin] cover
[mixin] depth-level
[mixin] gradient
[mixin] inner-side-shadow
[mixin] only-between-widths
[mixin] only-between-widths
[mixin] only-over-width
[mixin] only-under-width
[mixin] text-shadow

is-percentage

@function is-percentage($value) { ... }

Description

Checks if a value is a percentage.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a percentage, false if it is not.

Used by

[mixin] animation-stage
[function] color-invert
[function] is-position
[function] shade
[function] tint
[mixin] cover
[mixin] gradient
[mixin] responsive-ratio

is-position

@function is-position($value, $allow-aliases: false, $include-center: true) { ... }

Description

Checks if a value is a position/offset, which is defined as either a length, a percentage, or one of the following keyword values: center, top, right, bottom, or left. This is useful when writing mixins that use properties such as transform-origin, which has a 1-3 value syntax where the first two values must be a position/offset.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none
`$allow-aliases`	If `true`, the function will return true if the `$value` is an alias for a position/offset, not just for exact matches. For example, if this is set to true, the function will return true for a $value of `btm` as well as `bottom`. This parameter also accepts a number of string values such as a `aliases`, `alias`, `allow`, and `allow-alias`.	`Bool` or `String`	`false`
`$include-center`	Pass true to include the `'center'` position/offset. Pass `false` or `null` to not include center.	`Bool`	`true`

Returns

Bool —

True if $value is a position, false if it is not.

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-length
[function] is-percentage
[function] is-string
[function] resolve-alias

Used by

[mixin] animation-stage
[mixin] flick
[mixin] power
[mixin] vanish

is-relative-length

@function is-relative-length($value) { ... }

Description

Checks if a value is a relative length.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a relative length, false if it is not.

Used by

[function] is-length

is-reserved

@function is-reserved($word) { ... }

Description

Takes a given string and returns true if it is a reserved word in CSS or Sass, and returns false if it is not a reserved word.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$word`	The word being checked to see if it is reserved.	`String`	— none

Returns

Bool —

Returns true if $word is reserved, otherwise returns false.

Throws

Invalid value of [ #{$word} ] passed to

is-resolution

@function is-resolution($value) { ... }

Description

Checks if a value is a resolution.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a resolution, false if it is not.

is-string

@function is-string($value) { ... }

Description

Checks if a value is a string.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a string, false if it is not.

Used by

[mixin] animation-back-face
[mixin] animation-stage
[mixin] bg-zoom
[mixin] bounce
[mixin] bounciness
[mixin] color-shifter
[mixin] fade
[mixin] flick
[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip
[mixin] hinge
[mixin] pan-wipe
[mixin] ping
[mixin] poof-puff
[mixin] poof
[mixin] power
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] rotate
[mixin] scale-down
[mixin] scale-up
[mixin] slide
[mixin] slit
[mixin] snappiness
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-blur-out
[mixin] text-drop-shadow
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-pop-up
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] wiggle
[mixin] wobble
[mixin] zoom
[mixin] arrow-curved-tail
[mixin] arrow
[mixin] chevron
[mixin] point
[mixin] pointing-label
[mixin] shape-shadow
[mixin] triangle
[function] color-complement
[function] complement-color
[function] color-contrast
[function] color-invert
[function] color-text-contrast
[function] conv-angle
[function] is-global-value
[function] is-position
[function] list-insert-nth
[function] str-to-num
[function] trend-line
[mixin] bg-image-svg
[mixin] bg-image
[mixin] caret
[mixin] cover
[mixin] child-index
[mixin] flex-center
[mixin] ghost-button
[mixin] gradient
[mixin] inner-side-shadow
[mixin] responsive-ratio

is-time

@function is-time($value) { ... }

Description

Checks if a value is a time.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to be checked.	`Any`	— none

Returns

Bool —

True if $value is a time, false if it is not.

Used by

[mixin] color-shifter
[mixin] ghost-button

is-true

@function is-true($value) { ... }

Description

Returns whether $value is "true", in a more limited sense than the Sass definition of having "truthiness"

In Sass, all values other than false and null are considered truthy. Empty strings, empty lists, and empty maps are all "truthy" and sometimes you may want to check if something is more strictly true while excluding such values.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	A value to check.	`Any`	— none

Returns

Bool —

Returns true if $value is true (not just having truthiness).

Used by

[mixin] shape-shadow
[function] char-at
[function] list-count-values
[function] list-insert-nth
[function] list-prepend
[function] list-purge
[function] list-remove-nth
[function] list-replace-nth
[function] list-update
[mixin] responsive-ratio

is-valid-hex

@function is-valid-hex($value) { ... }

Description

Checks if a value is a valid hex color code. The value must start with '#' and be followed by 3, 4, 6, or 8 hexadecimal characters.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The value to check.	`Any`	— none

Returns

Bool —

True if the value is a valid hex color code, false if not.

Used by

[mixin] shape-shadow

last-index

Since 0.15.0

@function last-index($list, $value) { ... }

Description

Returns the last index of $value in $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to search for `$value`.	`List`	— none
`$value`	Value to be searched for in `$list`.	`Any`	— none

Returns

Number or Null —

Returns the last index of $value in $liSt if $value exists in $list, otherwise returns null.

Example

last-index('a' 'b' 'a', 'a')
// 3

last-index('a' 'b' 'a', 'z')
// null

Requires

[function] is-empty

last-of

Since 0.15.0

@function last-of($value) { ... }

Description

Returns last element of a List or the last property value pair from a map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The List or Map from which to retrieve last element or property/value pair.	`List`	— none

Returns

Any type —

The last element from $value. If $value is a Map, returns the last key/value pair as as a two value, space-separated List.

Example

last-of('a' 'b' 'c')
// 'a'

last-of('a')
// 'a'

last-of(())
// null

Throws

The value passed to the [ last-of() ] function is empty, cannot

Requires

[function] is-empty

Used by

[mixin] last-of

linear-interpolation

@function linear-interpolation($map, $conv-to-rem: true) { ... }

Description

Calculate the definition of a line between two points. This is very useful for things like setting responsive font-sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	A map where the keys are viewport widths in pixels, and each value associated is the desired pixel size at that given view width.	`Map`	— none
`$conv-to-rem`	If true, will convert the `px` value in the returned CSS `calc()` equation to `rem` units.	`Bool`	`true`

Returns

Calculation —

A linear equation expressed as a calc() function

Example

.element {
  font-size: linear-interpolation((320px: 16px, 768px: 20px));
}
// Compiles to...
.element {
  font-size: calc(0.89285714vw + 0.82143rem);
}

Throws

Invalid data type for $map parameter in the
The [ linear-interpolation() ] function\
Invalid $map values for the [ linear-interpolation() ] function.

Requires

[function] conv-to-rem
[function] equals-true
[function] is-map
[function] to-fixed

list-chunk

@function list-chunk($list, $size) { ... }

Description

Chunks $list into multiple space-separated lists with lengths of the given $size. Each of these lists is appended and returned in a comma-separated list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to chunk.	`List`	— none
`$size`	The length of the new lists.	`Number`	— none

Returns

List or Null —

A comma-separated list containing space-separated lists of the given $size.

Example

list-chunk('a' 'b' 'c' 'd' 'e', 2); // 'a' 'b', 'c' 'd', 'e'

Throws

Invalid $size input for the [ list-chunk() ] mixin. This value

Requires

[function] is-integer
[function] to-list

list-contains

Since 0.14.0

@function list-contains($list, $value) { ... }

Description

Returns whether $list contains $value.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to check.	`List`	— none
`$value`	The value to look for.	`Any`	— none

Returns

Bool —

Returns true if $list contains $value, false if not.

Example

list-contain('a' 'b' 'c', 'a')
// true

list-contains('a' 'b' 'c', 'z')
// false

list-count-values

Since 0.14.0

@function list-count-values($list) { ... }

Description

Counts the number of occurrences of each value in $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List having its values counted.	`List`	— none

Returns

Map —

Values mapped to their count

Example

list-count-values('a' 'b' 'c' 'a' 'c' 'c')
// (a: 2, b: 1, c: 3)

Requires

[function] is-true

list-flatten

Since 0.17.0

@function list-flatten($value) { ... }

Description

Turns multi-dimensional Lists or Maps into flat, one-level Lists.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The List or Map to flatten.	`List` or `Map`	— none

Returns

List —

The newly flattened List or Map.

Example

list-flatten(('a' 'b' 'c', 'd' 'e' 'f', 'g' 'h' 'i'))
// 'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h' 'i'

Throws

Invalid $value data type error, $value must not be a 'map.

Used by

[function] list-merge

list-insert-nth

Since 0.17.0

@function list-insert-nth($list, $index, $value, $allow-null: false) { ... }

Description

Inserts $value in $list at $index.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to update.	`List`	— none
`$index`	The index in `$list` where `$value` will be inserted. Must be a non-zero, positive integer. If `$allow-null` is left `false`, its default value, an `$index` value greater than the length of the List will result in `$value` being appended directly on the end of the list, increasing the length of `$list` by only 1, with the difference in index values disregarded.	`Number`	— none
`$value`	The value to insert in `$list` at `$index`,	`Any`	— none
`$allow-null`	If `true, this will allow`$index`values that are greater than the length of`$list`to cause the function to return a List with null list values between the end of the original List and the index value provided. Alias values for this variable that resolve as`true`are`yes`,`y`,`'true'`(in quotes),`t`, and`allow`.	`Bool` or `String`	`false`

Returns

List —

The new List with $value inserted at $index.

Example

list-insert-nth('a' 'b' 'c', 2, 'z')
// 'a' 'z' 'b' 'c'

list-insert-nth('a' 'b' 'c', 9, 'z')
// 'a' 'b' 'c' 'z'

list-insert-nth('a' 'b' 'c', 9, 'z', true)
// 'a' 'b' 'c' null null null null null 'z'

list-insert-nth('a' 'b' 'c', 0, 'z')
// error

Throws

Invalid $list data type error for the [ list-insert-nth() ] function.
Invalid $index of #{meta.inspect($index)} passed to the

Requires

[function] equals-true
[function] is-integer
[function] is-map
[function] is-string
[function] is-true

list-loop

Since 0.15.0

@function list-loop($list, $number: 1) { ... }

Description

Shift elements in $list forward or backwards on a loop, by $number of positions.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to update.	`List`	— none
`$number`	The number of position between old and new indices. Can be positive or negative but must be an integer.	`Number`	`1`

Returns

List —

Returns the newly shifted list.

Example

list-loop('a' 'b' 'c')
// 'c' 'a' 'b'

list-loop('a' 'b' 'c', 2)
// 'b' 'c' 'a'

Throws

Invalid data type for $list in the [ list-loop() ] mixin. Value
Invalid data type for $number in the [ list-loop() ] mixin. This

Requires

[function] is-integer

list-merge

Since 0.17.0

@function list-merge($lists...) { ... }

Description

Merges multiple Lists into a single List after removing all duplicate values.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$lists`	The List or Lists to merge.	`Arglist`	— none

Returns

List —

The newly merged List with all duplicates removed.

Example

$merged-list: list-merge(('a' 'b' 'c', 'b' 'e' 'd', 'a' 'c' 'b'));
// $merged-list == "a", "b", "c", "e", "d"

$list-1: ('a' 'b' 'c');
$list-2: ('b' 'e' 'd');
$list-3: ('a' 'c' 'b');
$merged-map: list-merge($list-1, $list-2, $list-3);
// $merged-lists == "a", "b", "c", "e", "d"

$merged-map: list-merge((1: 'a', 2: 'b', 3: 'c', 4: 'a' 'b' 'f'))
// $merged-map == 1, "a", 2, "b", 3, "c", 4, "f"

Throws

Invalid $list data type error, $list must not be a 'map.

Requires

[function] list-flatten
[function] list-remove-duplicates

list-prepend

Since 0.15.0

@function list-prepend($list, $value) { ... }

Description

Adds $value as first index of $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list on which to preprend `$value`.	`List`	— none
`$value`	The value to prepend to `$list`.	`Any`	— none

Returns

List —

The new List, created by adding $value to the start of $list and shifting all other values in $list over by 1 index position.

Example

list-prepend('a' 'b' 'c', 'z')
// 'z' 'a' 'b' 'c'

Throws

Invalid data type for $list in the [ list-prepend() ] function.

Requires

[function] to-list
[function] is-map
[function] is-true

list-purge

@function list-purge($list) { ... }

Description

Removes all values from $list that are null, false, or are empty maps, lists, or strings.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to purge.	`List`	— none

Returns

List —

The purged list.

Requires

[function] is-true
[function] to-list

Used by

[function] list-remove-nth
[function] list-replace-nth

list-range

Since 0.15.0

@function list-range($n) { ... }

Description

Build a list of values from 1 through $n.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$n`	The maximum value. Must be a unitless integer greater than 0.	`Number`	— none

Returns

List or Number

Example

list-range(5)
// 1 2 3 4 5

list-range(1)
// 1

Throws

Invalid $n value of #{meta.inspect($n)} the [ list-range() ]

Requires

[function] is-integer

Used by

[function] list-to-map

list-remove-duplicates

Since 0.15.0

@function list-remove-duplicates($list) { ... }

Description

Removes duplicate values from $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List from which to remove duplicates.	`List`	— none

Returns

List —

The new List with duplicates removed.

Example

list-remove-duplicates('a' 'b' 'a' 'b')
// 'a' 'b'

Throws

Invalid $list data type error for the [ list-remove-duplicates() ]

Requires

[function] is-map
[function] to-list

Used by

[function] list-merge

list-remove-nth

Since 0.15.0

@function list-remove-nth($list, $index) { ... }

Description

Remove value at $index from $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to update.	`List`	— none
`$index`	The list index to remove.	`Number`	— none

Returns

List —

The update list with the value at $index removed.

Example

list-remove-nth('a' 'b' 'c', 2)
// 'a' 'c'

Requires

[function] list-replace-nth
[function] is-integer
[function] list-purge
[function] is-true
[function] to-list

list-replace-nth

Since 0.15.0

@function list-replace-nth($list, $index, $value) { ... }

Description

Replaces value at $index from $list with $value.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to update.	`List`	— none
`$index`	The list index to replace.	`Number`	— none
`$value`	The value to be placed in the List at `$index`	`Any`	— none

Returns

List —

The update list with the value at $index replaced with $value

Example

list-replace-nth('a' 'b' 'c', 2, 'z')
// 'a' 'z' 'c'

Throws

Invalid $list data type for the [ list-replace-nth() ] function.
Invalid $index of #{meta.inspect($index)} used for the

Requires

[function] is-map
[function] is-integer
[function] list-purge
[function] is-true
[function] to-list

Used by

[function] list-remove-nth

list-reverse

Since 0.15.0

@function list-reverse($list) { ... }

Description

Reverses the order of $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to reverse.	`List`	— none

Returns

List —

The updated list with its order having been reversed.

Example

sl-reverse('a' 'b' 'c' 'd')
// 'd' 'c' 'b' 'a'

Throws

Invalid $list data type for the [ list-reverse() ] function. This

Requires

[function] to-list

list-slice

Since 0.15.0

@function list-slice($list, $start: 1, $end: list.length($list)) { ... }

Description

Slices $list between $start and $end.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to slice.	`List`	— none
`$start`	The start index.	`Number`	`1`
`$end`	The end index.	`Number`	`list.length($list)`

Returns

List —

The new sliced List.

Example

list-slice('a' 'b' 'c' 'd' 'e', 2, 4)
// 'b' 'c' 'd'

list-slice('a' 'b' 'c' 'd' 'e', 2, 2)
// 'b'

Throws

Invalid $list data type error for the [ list-slice() ]
List indexes #{$start} and #{$end} for the [ list-slice() ] function
Start index is #{$start} but has to be lesser than or equals to
Start index is #{$start} but list is only #{$list-length} items
End index is #{$end} but list is only #{$list-length} items

Requires

[function] is-integer
[function] is-map

list-sort

Since 0.16.0

@function list-sort($list, $order: smth.$sort-order) { ... }

Description

Sorts values of $list by $order using quick-sort algorithm. By default, the order is alphabetical and is an imported variable called $sort-order.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to sort.	`List`	— none
`$order`	The order to respect for the newly sorted List.	`List`	`smth.$sort-order`

Returns

List —

The newly sorted List.

Example

list-sort('b' 'a' 'c')
// 'a' 'b' 'c'

list-sort(3 5 1)
// 1 3 5

Throws

Invalid $list data type error for the [ list-sort() ]
Invalid $order data type for the [ list-sort() ] function.

Requires

[function] is-list
[function] is-falsey
[function] is-map
[function] to-list
[function] _str-compare
[variable] sort-order

[private] _str-compare

Since 0.16.0

@function _str-compare($a, $b, $order) { ... }

Description

Compares $a and $b based on $order.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$a`	The first value.	`Any`	— none
`$b`	The second value	`Any`	— none
`$order`	alphabetical order	`List`	— none

Returns

Bool —

The helper Boolean that tells the list-sort() function which value should come first.

Used by

[function] list-sort

list-to-map

Since 0.15.0

@function list-to-map($list) { ... }

Description

Casts a $list into a Map, using indexes as keys. Useful for iterating through a List with an index variable.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to cast into a Map.	`List`	— none

Returns

Map —

The new Map created from $list.

Example

list-to-map('a' 'b' 'c')
// (1: 'a', 2: 'b', 3: 'c')

@each $index, $value in to-map($list) { ... }

Throws

List cannot be empty for the [ list-to-map() ] function.

Requires

[function] list-range
[function] is-empty
[function] is-map

list-to-string

@function list-to-string($list, $separator: ' ', $extra-space: false) { ... }

Description

Iterates over a List and returns it as a converted String.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The List to convert into a String.	`List` or `Map`	— none
`$separator`	The separator to use between the list elements. By default this is the separator used in $list.	`String`	`' '`
`$extra-space`	Pass true to use extra space between list items in the resulting String.	`Bool`	`false`

Returns

String —

The converted String.

Throws

Invalid $separator type passed to the [ list-to-string() ]

Requires

[function] map-to-string

Used by

[mixin] animation-stage
[mixin] bg-zoom
[mixin] bounce
[mixin] bounciness
[mixin] color-shifter
[mixin] fade
[mixin] flick
[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip
[mixin] hinge
[mixin] pan-wipe
[mixin] ping
[mixin] poof-puff
[mixin] poof
[mixin] power
[mixin] puff
[mixin] roll
[mixin] rotate-scale
[mixin] rotate
[mixin] scale-down
[mixin] scale-up
[mixin] slide
[mixin] slit
[mixin] snappiness
[mixin] space
[mixin] speed
[mixin] swing
[mixin] text-blur-out
[mixin] text-drop-shadow
[mixin] text-flicker
[mixin] text-focus-in
[mixin] text-glitch
[mixin] text-pop-shadow
[mixin] text-pop-up
[mixin] text-tracking-in
[mixin] text-tracking-out
[mixin] twister
[mixin] vanish
[mixin] wiggle
[mixin] wobble
[mixin] zoom
[mixin] arrow-curved-tail
[mixin] arrow
[function] char-at
[function] stringify-map-keys
[mixin] caret
[mixin] cover
[mixin] flex-center
[mixin] gradient

list-update

@function list-update($list, $old-value, $new-value) { ... }

Description

Replaces $old-value with $new-value in $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to update.	`List`	— none
`$old-value`	The old value to replace in `$list`.	`Any`	— none
`$new-value`	The new value that is replacing the `$old-value`.	`Any`	— none

Returns

List —

The new, updated list.

Requires

[function] is-true
[function] to-list

make-long-shadow

@function make-long-shadow($color: hsla(0, 0%, 15%, 0.95), $longness: 20) { ... }

Description

Generates the values to create a long shadow on text or any other element. Used by the long-shadow() mixin, but can also be used on its own as the value for a text-shadow or box-shadow property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color of the long shadow.	`Color`	`hsla(0, 0%, 15%, 0.95)`
`$longness`	Used to calculate the length of the shadow. Must be a unitless integer greater than 0.	`Number`	`20`

Returns

List —

The list of values that can be used by the text-shadow or box-shadow properties. These values are also used by the long-shadow() mixin.

Throws

Invalid input for $longness in the [ make-long-shadow() ]

Requires

[function] is-integer

Used by

[mixin] long-shadow

See

[mixin] long-shadow

map-get-key-chains

Since 0.14.0

@function map-get-key-chains($map) { ... }

Description

If a map is deep and has nested maps, returns a comma-separated list of key "chains" with the key for each nested map in the chain, each individual chain in the list is itself a space separated list of each key for each nested map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	The map from which to get the nested key chains.	`Map`	— none

Returns

List or String —

A comma-separated list of space-separated lists comprised of all the nested keys that are in a chain. If there is only one nested key chain, it will just return a space-separated list of those keys. If there was only a single nested map in $map, will return a string with the name of the nested key.

Requires

[function] map-is-flat
[function] _map-get-key-chains-recursive

[private] _map-get-key-chains-recursive

Since 0.14.0

@function _map-get-key-chains-recursive() { ... }

Description

Recursive key searching function used by the map-get-key-chain function.

Parameters

None.

Requires

[function] map-is-flat

Used by

[function] map-get-key-chains

See

[function] map-get-key-chains

map-is-deep

Since 0.14.0

@function map-is-deep($map) { ... }

Description

Determines if a given map has at least one nested key and will return true if it does, indicating that it is a deep map. Otherwise, returns false.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	Map to determine if it is deep and has nested keys.	`Map`	— none

Returns

Bool —

True if the map has at least one nested key, false if not.

map-is-flat

Since 0.14.0

@function map-is-flat($map) { ... }

Description

Determines if a given map does not have any nested keys and will return true if it does not, indicating that it is a shallow/flat map. Otherwise, returns false.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	Map to determine if it is shallow and has no nested keys.	`Map`	— none

Returns

Bool —

True if the map has no nested keys and is shallow, false if does have nested keys and is deep.

Used by

[function] map-get-key-chains
[function] _map-get-key-chains-recursive

map-to-list

@function map-to-list($map, $keep: 'both', $separator: comma) { ... }

Description

Casts a Map into a List.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	The map being cast into a list.	`Map`	— none
`$keep`	Whether to keep just the 'keys', just the 'values' or 'both' from the $map.	`String`	`'both'`
`$separator`	The separator to use in the new List. Can be `comma`, `space`, or `slash`.	`String`	`comma`

Returns

List —

Depending on the flag, returns either keys, values or both.

Used by

[function] to-list

map-to-string

@function map-to-string($map, $separator: ', ', $pair-separator: ', ') { ... }

Description

Iterates over a map and returns it as a converted string

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	The map to convert into a string.	`Map`	— none
`$separator`	The separator to use between the map's each of the map's properties.	`String`	`', '`
`$pair-separator`	The separator to use between the key and value of each pair.	`String`	`', '`

Returns

String —

The converted string.

Throws

Invalid $map type passed to the map-to-string() function. You
Invalid $separator type passed to the map-to-string()
Invalid $pair-separator type passed to the map-to-string()

Used by

[function] list-to-string

num-to-ratio

@function num-to-ratio($number, $common-ratio: false, $accuracy: 50000, $tolerance: 0.01) { ... }

Description

Converts a decimal number into a ratio expressed as a space-separated list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	The number to convert into a media ratio.	`Number`	— none
`$common-ratio`	If value is anything except for `null` and `false`, this flag will direct the function to return the closest common media ratio.	`Bool`	`false`
`$accuracy`	The search limit for the denominator.	`Number`	`50000`
`$tolerance`	How close the provied $number can get to return a common media ratio when the $common-ratio flag is truthy.	`Number`	`0.01`

Returns

List —

The number converted into a ratio.

Throws

Invalid $number passed to [ num-to-ratio() ] function. Value must

Requires

[function] is-falsey
[function] is-number
[function] str-to-num

Used by

[function] ratio-to-percentage

order-index

@function order-index($num, $index) { ... }

Description

Used by the child-index() mixin in _family.scss. It will return the proper sorted numbers depending on the $index value.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	The number of children.	`Number`	— none
`$index`	The index of the sorting.	`Number`	— none

Returns

Number —

The order index.

Used by

[mixin] child-index

See

[mixin] child-index

pi

@function pi($number: 1) { ... }

Description

Takes a given number value and returns that value multipled by pi.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	The given number. Can take any number, unitless or with any unit.	`Number`	`1`

Returns

Number —

The new value.

Throws

Value of $number for the [ pi() ] function must be a valid

Used by

[function] conv-angle

ratio-to-percentage

@function ratio-to-percentage($ratio, $num-returns-common-ratio) { ... }

Description

Converts a ratio into a percentage.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ratio`	A ratio value that can be expressed one of three ways: by a two number List (ex: `(16 9)` for a 16:9 ratio), by a String containing two numbers separated by either a colon, slash, comma or space (ex: `'21:9'`, `'21/9',`'21,9'`, etc), or by single number (ex:`0.75` for a 3:4 ratio)	`List` or `String` or `Number`	— none
`$num-returns-common-ratio`	If this is set to any value except `null` or `false`, when $ratio is provided as a single Number the function will try to look for a common media ratio that is close to the provided number, on which to base the returned percentage.	`Bool`	— none

Returns

Number —

A percentage value equal to the given ratio

Throws

Invalid $ratio value of #{meta.inspect($ratio)} passed to
Invalid ratio format of #{meta.inspect($ratio)} ] passed to the
Invalid $ratio value of [ #{meta.inspect($ratio)} ] for
Invalid $ratio value of [ #{meta.inspect($ratio)} ] for the

Requires

[function] num-to-ratio
[function] str-to-num

Used by

[mixin] responsive-ratio

remove-from

@function remove-from($list, $value) { ... }

Description

Removes $value from $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to update.	`List`	— none
`$value`	The value to remove from `$list`.	`Any`	— none

Returns

List —

The updated list.

remove-where

@function remove-where($list, $condition) { ... }

Description

Return a copy of $list with all elements for which $condition returns true removed.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	A list containing values to be checked and possibly removed.	`List`	— none
`$condition`	A conditional statement used to check every value in $list.	`Any`	— none

Returns

List —

The updated list.

Example

.remove-where(80deg 30% 80% 0.5, meta.get-function('is-angle', $module: 'smth'));

resolve-alias

@function resolve-alias($alias, $alias-map: smth.$direction-resolution-map) { ... }

Description

Takes a potential alias for a keyword value and returns the corresponding keyword based on an alias resolution map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$alias`	The shortcut or alias used for the keyword.	`String`	— none
`$alias-map`	The map of keywords as keys with lists of their aliases as values.	`Map`	`smth.$direction-resolution-map`

Returns

String or Null —

Returns the parameter keyword string if the given alias is found in the alias map, otherwise returns null.

Throws

Invalid data type of [ #{meta.type-of($alias)} ] for $alias
Invalid data type of [ #{meta.type-of($alias-map)} ] for

Requires

[variable] map-alias-resolutions

Used by

[function] is-position

shade

@function shade($color, $percentage) { ... }

Description

Darken a color by a given percentage using the built-in color.scale() method.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color being darkened.	`Color`	— none
`$percentage`	The percentage of lightness to remove from the color.	`Number`	— none

Returns

Color —

The darkened color.

Throws

Invalid data type passed to [ shade() ] function. You passed
Invalid data type passed to [ shade() ] function.

Requires

[function] is-color
[function] is-number
[function] is-percentage

some

Since 0.16.0

@function some($list, $func, $mod: null, $args...) { ... }

Description

Tests whether at least one items from $list passes the test implemented by $func.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	The list to run the test against.	`List`	— none
`$func`	The function to run against items from $list.	`String`	— none
`$mod`	The module that $func belongs to. If no module and calling a global function, pass `null` or nothing. If calling a plain CSS function, pass `css`.	`String` or `Null`	`null`
`$args`	Optional extra arguments to pass to the function	`Arglist`	— none

Returns

Bool —

Returns true if some items from $list pass the test implemented by $func, otherwise returns false.

Example

some(1 2 3, unitless)
// true

some(1 2 3px, unitless)
// false

Requires

[function] is-falsey

str-remove

Since 0.9.0

@function str-remove($string, $search) { ... }

Description

Remove all instances of $search from $string.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	The initial string.	`String`	— none
`$search`	The substring to remove.	`String`	— none

Returns

String —

The updated string.

Throws

Invalid data type error for $string or $search.

Requires

[function] str-replace

str-replace

@function str-replace($string, $search, $replace: '') { ... }

Description

Replace all instances of $search with $replace in $string.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	The initial string.	`String`	— none
`$search`	The substring to replace.	`String`	— none
`$replace`	The new value that replaces `$search`. If nothing is passed here, or an empty string is passed, $search is removed from the string.	`String`	`''`

Returns

String —

The updated string.

Throws

Invalid data type passed to [ str-replace() ] function. All

Used by

[function] str-remove
[mixin] font-face

str-to-list

@function str-to-list($string, $delimiter, $separator: comma) { ... }

Description

Takes a String and separates it into a List.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	The initial string.	`String`	— none
`$delimiter`	The separator found in `$string` that is used to subdivide the string into list values.	`String`	— none
`$separator`	The separator that will be used between values in the new list. Must be either `space`, `comma` or `slash`. You may also pass the string-wrapped characters themselves to this parameter, such as: `' '`, `','`, `', '`, `'/'`. or `' / '`.	`String`	`comma`

Returns

List —

The converted list.

Throws

List passsed to str-to-list warning.
Invalid $string type passed, not a string.
Invalid $delimiter type passed, not a string.
Invalid $separator value passed, not a valid separator.

str-to-num

@function str-to-num($string) { ... }

Description

Safely converts a string representation of a number into an actual number that will always work when things like string.unquote() or interpolation give errors. If the string is not a valid numerical value, it will be returned as-is with a warning.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	Value to be parsed.	`String`	— none

Returns

Number —

The numerical representation of the input string.

Throws

$string is not a string.
$string is not a valid numeric warning.

Requires

[function] _to-unit
[function] is-number
[function] is-string
[variable] map-decimals

Used by

[function] num-to-ratio
[function] ratio-to-percentage
[function] _to-unit

[private] _to-unit

@function _to-unit($value, $unit) { ... }

Description

Used by the str-to-num function as a helper for converting numbers with units.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The number part of the conversion.	`String`	— none
`$unit`	The unit in the value being coerced.	`String`	— none

Returns

Number —

A number with the given unit.

Throws

Unparsable value in the $string passed to the [ str-to-num() ]

Requires

[function] str-to-num
[variable] map-units

Used by

[function] str-to-num

See

[function] str-to-num

stringify-map-keys

Since 0.17.0

@function stringify-map-keys($map) { ... }

Description

Converts a Map's keys into strings

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	The Map which will have its keys converted to strings.	`Map`	— none

Returns

Map —

The map with stringified keys.

Requires

[function] is-list
[function] list-to-string

strip-unit

@function strip-unit($num) { ... }

Description

Strips a given value of its associated unit and returns the unitless number.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	A value with a unit to be stripped	`Number`	— none

Returns

Number —

The unitless number.

Used by

[function] conv-angle
[function] conv-color
[function] conv-to-em
[function] conv-to-px
[function] conv-to-px
[function] conv-to-px
[function] conv-to-rem
[function] _unit-to-rem
[mixin] cover
[mixin] only-between-widths
[mixin] only-between-widths
[mixin] only-over-width
[mixin] only-phones
[mixin] only-under-width

time-equation

@function time-equation($equation-name, $progress) { ... }

Description

Takes a name for an equation and returns the respective equation. Unless mentioned otherwise in the comments, will return a CSS calc() function, but some keyword equation names will return other CSS functions. Pass an argument representing the progress of the animation, a value of 0-1 or 0% - 100%. For example, when $progress is equal to 0, the animation is at its starting point, when it is equal to 1, the animation is at its end.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$equation-name`	The name of the custom equation. The list of equation keyword names is: `wave-x`, `wave-y`, `harmonic-x`, `harmonic-y`, `inverted-harmonic-x`, `inverted-harmonic-y`, `circular-motion-x`, `circular-motion-y`, `spiral-motion-x`, `spiral-motion-y`, `log-spiral-x`, `log-spiral-y`, `archimedes-spiral-x`, `archimedes-spiral-y`, `damped-harmonic`, `hypot-x`, `hypot-y`, `liss-x`, `liss-y`, `figure-eight-x`, `figure-eight-y`, `tan-oscillation`, `tan-wave`, `dynamic-scale`, `sin-bounce`, `heartbeat`, `gravity-bounce`, `sin-stretch`, `dynamic-scale`, `cycloidal`, `exponential-growth`, `log-approach`, `opacity-variation`, `rotational-acceleration`, `rotational-deceleration`, `sin-size-adjustment`, `dynamic-box-shadow`, `dynamic-skew`, `vibration`, `vibration-x`, vibration-y`,`blur-variation`,`perspective-rotation`,`clip-path-wave`,`sin-phase`,`cos-dynamic-skew`,`width-pulse`,`hue-rotation`,`opacity-damped`,`helix-x`,`helix-y`,`helix-z`,`mod-wave-x`,`mod-wave-y`,`mod-wave-z`,`breath`,`elastic-bounce`,`radius-morph`,`log-displacement`,`spiral-zoom-x`,`spiral-zoom-y`.	`String`	— none
`$progress`	Represents one of two possible things. It could represent the current state or progress of an animation that changes one value to another over a specific duration. For example, this could be a number between 0-1 or a percentage between 0%-100% that matches the percentage value of the part of the keyframe in which it is being used. This could also represent an interaction-based value, for instance a scroll position, mouse-movement, other interactive event, allowing the animation to respond dynamically to user input. In this case, you may want to pass a CSS custom property for this parameter.	`Number`	— none

Returns

Calculation —

The CSS function that matches the equation name.

Throws

Invalid data type of #{meta.inspect(meta.type-of($equation-name))}
The equation name passed to the [ time-equation() ]

Requires

[function] timing

timing

@function timing($func-name, $alias-map: $map-timing-functions) { ... }

Description

Takes a name for a custom timing function and return the associated cubic-bezier curve.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$func-name`	The name of the custom timing function. The full list of function names is: 'ease-in-quad', 'ease-in-cubic', 'ease-in-quart', 'ease-in-quint' 'ease-in-sine', 'ease-in-expo', 'ease-in-circ' 'ease-in-back', 'ease-out-quad', 'ease-out-cubic', 'ease-out-quart', 'ease-out-quint', 'ease-out-sine', 'ease-out-expo', 'ease-out-circ' 'ease-out-back', 'ease-in-out-quad', 'ease-in-out-cubic', 'ease-in-out-quart', 'ease-in-out-quint', 'ease-in-out-sine', 'ease-in-out-expo', 'ease-in-out-circ', 'ease-in-out-back'	`String`	— none
`$alias-map`	The map containing the custom timing functions.	`Map`	`$map-timing-functions`

Returns

Function —

The cubic-bezier curve

Example

.element {
  animation: fade-in 2s timing(ease-in-quad) 50ms both
}

Throws

Invalid data type of #{meta.inspect(meta.type-of($func-name))}
Invalid data type of #{meta.inspect(meta.type-of($alias-map))}
The timing function name passed to the [ timing() ] function

Requires

[variable] map-timing-functions

Used by

[function] time-equation

tint

@function tint($color, $percentage) { ... }

Description

Lighten a color by a given percentage using the built-in color.scale() method.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color being lightened.	`Color`	— none
`$percentage`	The percentage of lightness to add to the color.	`Number`	— none

Returns

Color —

The lightened color.

Throws

Invalid data type passed to [ tint() ] function. You passed

Requires

[function] is-color
[function] is-number
[function] is-percentage

Used by

[mixin] hamburger

to-bool

Since 0.17.0

@function to-bool($value) { ... }

Description

Casts a value to a boolean (Sass bool type), based on the "falsey" values in the is-falsey() function. Falsey values are null, false, 'false' (false as a string), 0, empty strings, empty lists, and empty maps.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The value to cast into a bool	`Any`	— none

Returns

Bool —

If the value is falsey, returns false, otherwise returns true.

Requires

[function] is-falsey

to-cmyk

@function to-cmyk($color) { ... }

Description

Takes a given color in virtually any notation and converts it into CMYK notation using the [ device-cmyk() ] CSS color function.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to convert into cmyk.	`Color`	— none

Returns

Color —

The converted color in [ device-cmyk() ] function format.

Throws

Invalid data type passed to [ to-cmyk() ] function. You passed

Used by

[function] conv-color

to-fixed

@function to-fixed($float, $digits: 2) { ... }

Description

Fixes a float to a given number of decimal places.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$float`	The number to format.	`Number`	— none
`$digits`	A integer representing the number of digits to leave after the decimal.	`Number`	`2`

Returns

Number —

The fixed digit number.

Throws

Invalid data type of [ #{meta.inspect(meta.type-of($float))} ]
Invalid data type of [ #{meta.inspect($digits)} ] passed to

Requires

[function] is-integer

Used by

[mixin] infinity-symbol
[mixin] pointing-label
[function] conv-color
[function] linear-interpolation
[function] trend-line
[mixin] hamburger

to-hex

@function to-hex($color) { ... }

Description

Converts a given color to hex notation in either 3, 6, 4, or 8 digit notation based on the input. If the given $color has alpha-transparency, the 4 or 8 digit hex color is returned as an unquoted string that cannot be used with any Sass color module methods or other functions that implement type checking, as Sass will consider the output to be an unquoted string, not a color. If the $color value has no alpha-transparency, or an alpha value of 1, the function will return either a 3 or 6 digit hex color, and this color will be correctly recognized by Sass type-checking as type 'color'.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color to convert.	`Color`	— none

Returns

Color or String —

A 3 or 6 digit hex color, or a 4 or 8 digit hex color as an unquoted string.

Throws

Invalid data type passed to [ to-hex() ] function. You passed

Requires

[function] _component-to-hex
[function] conv-color-name

Used by

[function] conv-color

[private] _component-to-hex

@function _component-to-hex($component) { ... }

Description

Helper function to convert a single component to a hex string. Used only by the to-hex() function.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$component`	The red, green, or blue color component number.	`Number`	— none

Returns

String —

A string representing the red, green, or blue component as a hex value.

Used by

[function] to-hex

to-list

@function to-list($value, $separator: list.separator($value)) { ... }

Description

Casts $value into a List.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	Value to cast into a List.	`Any`	— none
`$separator`	The separator to use in the new List. Can be `comma`, `space`, or `slash`.	`String`	`list.separator($value)`

Returns

List —

The new List.

Requires

[function] map-to-list

Used by

[function] list-chunk
[function] list-prepend
[function] list-purge
[function] list-remove-duplicates
[function] list-remove-nth
[function] list-replace-nth
[function] list-reverse
[function] list-sort
[function] list-update

to-map

Since 0.17.0

@function to-map($value) { ... }

Description

Casts a value to a Map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The value to convert into a map.	`Any`	— none

Returns

Map —

The $value cast into a Map.

top-shadow

@function top-shadow($depth, $color: #000, $intensity: 1) { ... }

Description

Computes the top shadow for a Material Design depth effect. Used by the depth-level() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$depth`	The shadow effect's depth level.	`Number`	— none
`$color`	The color of the shadow effect.	`Color`	`#000`
`$intensity`	An optional value that is multiplied with the default color opacity to increase or decrease the intensity of the effect.	`Number`	`1`

Returns

List —

Computed values for the top-shadow.

Used by

[mixin] depth-level

See

[mixin] depth-level

trend-line

@function trend-line($map, $convert-to-rem: true) { ... }

Description

Calculate the least square fit linear regression, or "trend-line", of a mapped set of provided values.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	A map where the keys are viewport widths in pixels, and each value associated is the desired pixel size at that given view width.	`Map`	— none
`$convert-to-rem`	If true, will convert the `px` value in the returned CSS `calc()` equation to `rem` units.	`Bool`	`true`

Returns

Calculation —

A linear equation expressed as a calc() function.

Example

.element {
  font-size: trend-line((576px: 24px, 768px: 24px, 992px: 34px));
}
// Compiles to...
.element {
  font-size: calc(2.46062992vw + 0.51083rem);
}

Throws

Invalid data type for $map parameter in the [ trend-line() ]
The $map passed to the [ trend-line() ] fucntion must contain
An error has occured in the [ trend-line() ] function. Invalid
The [ trend-line() ] function\

Requires

[function] conv-to-rem
[function] equals-true
[function] is-map
[function] is-string
[function] to-fixed

walk

@function walk($list, $function, $args...) { ... }

Description

Apply $function with $args to each item from $list.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	List of items	`List`	— none
`$function`	Function to apply to every item from `$list`.	`String`	— none
`$args`	Extra arguments to pass to `$function`.	`Arglist`	— none

Returns

List —

The result of the function being applied to the list.

Throws

There is no #{meta.inspect($function)} function available to

white

@function white($opacity: 1) { ... }

Description

Helper function that mixes white with a given opacity level.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$opacity`	An opacity level between either 0 and 1 or 0% and 100%, inclusive.	`Number`	`1`

Returns

Color —

The white color at the given opacity level.

Throws

Invalid data type passed to white(). Opacity must be a number.
Invalid opacity unit type of [ #{meta.inspect(math.unit($opacity))} ]
Invalid opacity level of #{meta.inspect($opacity)} passed to

mixins

elem

@mixin elem($elements...) { ... }

Description

Block Element - Used with BEM (Block-Element-Modifier) naming convention. Works with an unlimited number of elements on an unlimited number of blocks in the parent selector group. You can customize the separator characters used (__ by default) by changing the $bem-elem-separator variable, either when importing the smthr module or in the file ./variables/misc

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$elements`	Elements' names. These should simply be the comma separated name(s) of the element(s), not including the separating characters and not including the name of the block. For the class selector `.search-form__input` you would call this mixin on the `.search-form` block selector and pass the argument `input`.	`Arglist`	— none

Example

.search-form {
  width: 50%;

  @include elem(button, input) {
    border-color: hsl(274 100% 50% / 0.8);
  }
}
/* Compiles to... */
.search-form {
  width: 50%;
}
.search-form__button,
.search-form__input {
  border-color: border-color: hsl(274 100% 50% / 0.8);
}

Requires

[variable] bem-elem-separator

mod

@mixin mod($elements...) { ... }

Description

Element Modifier - Used with BEM (Block-Element-Modifier) naming convention.

Works with an unlimited number of modifiers on an unlimited number of elements in the parent selector group. You can customize the separator characters used (-- by default) by changing the $bem-mod-separator variable, either when importing the smthr module or in the file ./variables/misc

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$elements`	Modifiers' names. These should simply be the comma separated name(s) of the modifier(s), not including the separating characters and not including the name of the block or element. For the class selector `.search-form__input--focused` you would call this mixin on the `.search-form__input` selector and pass the argument `focused`. You may also call this mixin from within the content directive of an `elem()` mixin.	`Arglist`	— none

Example

.search-form {
  width: 50%;

  @include elem(button, input) {
    border-color: hsl(274 100% 50% / 0.8);

    @include mod(focused) {
      border-color: hsl(348 100% 50% / 0.95);
    }

  }
}
/* Compiles to... */
.search-form {
  width: 50%;
}
.search-form__button,
.search-form__input {
  border-color: border-color: hsl(274 100% 50% / 0.8);
}
.search-form__button--focused,
.search-form__input--focused {
  border-color: border-color: hsl(274 100% 50% / 0.8);
}

Requires

[variable] bem-mod-separator

bg-image-svg

@mixin bg-image-svg($svg-img-name, $bg-size, $min-ratio: 1.5, $img-2x-suffix: $image-suffix-2x|'@2x', $fallback-format: 'png', $hidpi-bg-props: null) { ... }

Description

Apply an SVG background image with a fall-back version and a version that is scaled to 2x for Retina and other HiDPI displays. This mixin will apply the background-image and background-size properties. You can set other background properties manually. For the 2x version of the image in the media query this mixin will generate, you can pass additional background properties to the mixin inside a map via the $hidpi-bg-props parameter.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$svg-img-name`	File path for the image. The '.svg' file extension is not required, but if it is included the string must either be in quotes or inside a function to be read correctly.	`String`	— none
`$bg-size`	Value for the background-size property.	`String` or `Number`	— none
`$min-ratio`	A minimum pixel ratio resolution value used to calculate the media query targeting Retina and other HiDPI screens. Common targeting ratios are 1.25, 1.3, 1.5, and 2.	`Number`	`1.5`
`$img-2x-suffix`	The suffix that is appended to the end of image name to designate that it is the 2x version for HiDPI displays.	`String`	`$image-suffix-2x\|'@2x'`
`$fallback-format`	The format of the fallback image being used. Pass values like 'png', 'jpg', etc.	`String`	`'png'`
`$hidpi-bg-props`	You can pass this argument a map of property: value pairs that will be added to the HiDPI/Retina media query, since the mixin will be the only way to access it.	`Map`	`null`

Throws

Invalid data type for $img-2x-suffix of
Invalid data type for $min-ratio passed to [ bg-image() ] mixin.
Invalid data type for $hidpi-bg-props passed to the [ bg-image() ]

Requires

[function] is-alias
[function] is-falsey
[function] is-map
[function] is-number
[function] is-string

bg-image

@mixin bg-image($img-name, $bg-size, $min-ratio: 1.25, $img-2x-suffix: $image-suffix-2x|'@2x', $hidpi-bg-props: null) { ... }

Description

Apply a background image with a version that is scaled to 2x for Retina and other HiDPI displays. This mixin will apply the background-image and background-size properties. You can set other background properties manually. For the 2x version of the image in the media query this mixin will generate, you can pass additional background properties to the mixin inside a map via the $hidpi-bg-props parameter.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$img-name`	File path for the image. Must either be a quoted string or inside a function to be read correctly.	`String`	— none
`$bg-size`	Value for the background-size property. Should most often be the width followed by the height of the 1x image.	`String` or `Number` or `List`	— none
`$min-ratio`	A minimum pixel ratio resolution value used to calculate the media query targeting Retina and other HiDPI screens. Common targeting ratios are 1.25, 1.3, 1.5, and 2.	`Number`	`1.25`
`$img-2x-suffix`	The suffix that is appended to the end of image name to designate that it is the 2x version for HiDPI displays.	`String`	`$image-suffix-2x\|'@2x'`
`$hidpi-bg-props`	You can pass this argument a map of property: value pairs that will be added to the HiDPI/Retina media query.	`Map`	`null`

Throws

Invalid data type for $img-2x-suffix of
Invalid data type for $min-ratio passed to [ bg-image() ] mixin.
Invalid data type for $hidpi-bg-props passed to the [ bg-image() ]
You are using an SVG image file with the [ bg-image() ] mixin.
The image you referenced in the [ bg-image() ] mixin does not

Requires

[function] is-alias
[function] is-falsey
[function] is-map
[function] is-number
[function] is-string
[variable] image-suffix-2x

border-radius

@mixin border-radius($radius: 10px) { ... }

Description

Adds the border radius property along with the background-clip: padding box property, value pair.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	The border-radius value.	`Number`	`10px`

button-base

@mixin button-base($background, $color, $border, $radius, $margin, $padding, $font-family, $font-size: 1.25rem, $font-weight: 400, $transition: null) { ... }

Description

Generates the base visual styles for a button element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$background`	The background color of the button.	`Color`	— none
`$color`	The button text color.	`Color`	— none
`$border`	The border value for the buttton.	`String`	— none
`$radius`	The border radius value.	`Number`	— none
`$margin`	The button's margin value.	`Number`	— none
`$padding`	The button's padding value.	`Number`	— none
`$font-family`	The button's font-family stack.	`List`	— none
`$font-size`	The button's font-size.	`Number`	`1.25rem`
`$font-weight`	The button's font-weight.	`Number` or `String`	`400`
`$transition`	The button's transition value. By default, a null value here will have the mixin search for a global $button-transition variable as is found in the variables/_misc.scss file in this library. If no global variable is found, it will apply the following default: `background-color 0.2s ease-out, color 0.2s ease-out`.	`String`	`null`

Requires

[function] is-alias

caret-up

@mixin caret-up($size: 0.25em, $color: #222) { ... }

Description

Applies the border properties necessary to make an up pointing caret (a little triangle). Used by the caret() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`

Used by

[mixin] caret

See

[mixin] caret

caret-up-right

@mixin caret-up-right($size: 0.25em, $color: #222) { ... }

Description

Applies the border properties necessary to make an up and to the right pointing caret (a little triangle). Used by the caret() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`

Used by

[mixin] caret

See

[mixin] caret

caret-right

@mixin caret-right($size: 0.25em, $color: #222) { ... }

Description

Applies the border properties necessary to make a right pointing caret (a little triangle). Used by the caret() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`

Used by

[mixin] caret

See

[mixin] caret

caret-down-right

@mixin caret-down-right($size: 0.25em, $color: #222) { ... }

Description

Applies the border properties necessary to make a down and to the right pointing caret (a little triangle). Used by the caret() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`

Used by

[mixin] caret

See

[mixin] caret

caret-down

@mixin caret-down($size: 0.25em, $color: #222) { ... }

Description

Applies the border properties necessary to make down pointing caret (a little triangle). Used by the caret() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`

Used by

[mixin] caret

See

[mixin] caret

caret-down-left

@mixin caret-down-left($size: 0.25em, $color: #222) { ... }

Description

Applies the border properties necessary to make a down and to the left pointing caret (a little triangle). Used by the caret() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`

Used by

[mixin] caret

See

[mixin] caret

caret-left

@mixin caret-left($size: 0.25em, $color: #222) { ... }

Description

Applies the border properties necessary to make a left pointing caret (a little triangle). Used by the caret() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`

Used by

[mixin] caret

See

[mixin] caret

caret-up-left

@mixin caret-up-left($size: 0.25em, $color: #222) { ... }

Description

Applies the border properties necessary to make an up and to the left pointing caret (a little triangle). Used by the caret() mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`

Used by

[mixin] caret

See

[mixin] caret

caret

@mixin caret($point: 'down', $size: 0.25em, $color: #222, $new-context: false, $placement: null, $inline-margin: $size * 0.85) { ... }

Description

Add a caret (little triangle) that can face up, down, left, or right.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$point`	The desired direction for the caret to face. Can be either `up`, `down`, `left`, or `right`. Can also be any of the aliases for these values.	`String`	`'down'`
`$size`	The caret's size.	`Number`	`0.25em`
`$color`	The caret's color.	`Color`	`#222`
`$new-context`	If true, will create a new context for the caret by applying `position: relative` to the parent and `position: absolute` to the pseudo-element containing the caret.	`Bool`	`false`
`$placement`	An optional parameter that can take either `before` (or `left`) or `after` (or `right`) as a value and determines whether the caret will be placed in a `::before` pseudo-element or an `::after` pseudo-element. If nothing is explicitly passed to this parameter, the mixin will place carets pointing up, up and right, right, down and right, and down on the right in an `::after` pseudo-element, and carets pointing down and left, left, and up and left on the left in an a `::before` pseudo-element.	`String`	`null`
`$inline-margin`	The size of the `margin-left` or `margin-right` property that is applied depending on whether a `::before` or `::after` pseudo element is used.	`Number`	`$size * 0.85`

Throws

#{$point-error-msg} You passed #{meta.inspect($point)}.
Invalid $size passed to the [ caret() ] mixin. This value must
#{$placement-error-msg} You passed #{meta.inspect($placement)}.

Requires

[mixin] caret-up
[mixin] caret-up-right
[mixin] caret-right
[mixin] caret-down-right
[mixin] caret-down
[mixin] caret-down-left
[mixin] caret-left
[mixin] caret-up-left
[function] is-alias
[function] is-length
[function] is-list
[function] is-number
[function] is-string
[function] list-to-string

clamp-height

@mixin clamp-height($min, $rel, $max) { ... }

Description

Gives an element dynamic height by taking an absolute length as a min-height value for the first parameter, a relative length to use for the height property, and then another absolute length for the max-height property. Follows the same argument syntax as the CSS clamp() method, and the clamp-height mixin and clamp-val function in this library. If you want to get even more responsive, pass clamp(), calc(), min(), and max() functions for these values.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$min`	The minimum height. Should be an absolute length value or a function that resolves to one.	`Number`	— none
`$rel`	The relative length height of the element. Use units like vh, %, em, etc. or a function using relative units.	`Number`	— none
`$max`	The maximum height. Should be an absolute length value or a function that resolves to one.	`Number`	— none

clamp-lines

@mixin clamp-lines($lines) { ... }

Description

Applies the properties necessary to clamp text to a given number of lines. Despite the -webkit browser prefixes on these properties, this should work in all major browsers. The CSS Overflow Module Level 4 defines a line-clamp property which is meant to replace this. However, there is currently still no unprefixed version of these properties' combined effects that is supported by any browser,

If you would like to truncate only a single line of text, try the truncate() function instead.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$lines`	Clamp the text to this number of lines. Accepts integer values greater than 0. Also accepts any of the CSS global values and the keyword value of `none`, but these are not generally recommended for use with this mixin.	`Number`	— none

Throws

Invalid value of #{meta.inspect($lines)} used for the $lines

Requires

[function] is-global-value
[function] is-integer

clamp-width

@mixin clamp-width($min, $rel, $max) { ... }

Description

Gives an element dynamic width by taking an absolute length as a min-width value for the first parameter, a relative length to use for the width property, and then another absolute length for the max-width property. Follows the same argument syntax as the CSS clamp() method, and the clamp-height mixin and clamp-val function in this library. If you want to get even more responsive, pass clamp(), calc(), min(), and max() functions for these values.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$min`	The minimum width. Should be an absolute length value or a function that resolves to one.	`Number`	— none
`$rel`	The relative length width of the element. Use units like vw, %, em, etc. or a function using relative units.	`Number`	— none
`$max`	The maximum width. Should be an absolute length value or a function that resolves to one.	`Number`	— none

clearfix

@mixin clearfix($clear-val: both, $ie-6: false) { ... }

Description

Applies the float clearing 'clearfix' hack. This modern incarnation of the clearfix will work as far back as Internet Explorer 6.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$clear-val`	The clear property's value. Can either be `left`, `right`, or `both`.	`String`	`both`
`$ie-6`	If `true` or `ie6` or `yes, clearfix will work as far back as IE6, otherwise it will work as far back as IE 8.	`Bool` or `String`	`false`

Throws

Invalid $clear-value data type of
Invalid $clear-value parameter of #{meta.inspect($clear-value)}

container

@mixin container($padding-x: 1rem, $max-width: smth.$max-inline-size, $is-logical: false) { ... }

Description

Quickly the adds some default properties for a container element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$padding-x`	The x padding of the container on device sizes below 768px.	`Number` or `Calculation`	`1rem`
`$max-width`	The max width (or max inline size) of the container. If passed explicitly and not relying on the $max-inline-size variable, it is recommended to pass an absolute length or a calculation that will produce one.	`Number` or `Calculation`	`smth.$max-inline-size`
`$is-logical`	If `true`, will use logical size properties of `inline-size`, `max-inline-size`, `padding-block` and `padding-inline` rather than the physical properties of `width`, `max-width`, and `padding` used when nothing is passed, or if `false` or `null` are passed explicitly.	`Bool`	`false`

Throws

Invalid data type for the $padding-x parameter passed to the
Invalid data type for the $max-width parameter passed to the

Requires

[function] is-absolute-length
[function] is-calculation
[function] is-length
[variable] max-inline-size

corner-ribbon

@mixin corner-ribbon() { ... }

Description

Places a "ribbon" of angled corner text in the top right corner of an element. The parent element should have position: relative; appllied or otherwise be positioned in a separate stacking context.

Parameters

None.

Example

<div class="parent"><span class="ribbon">FREE</span></div>
.ribbon { @include corner-ribbon; }

cover

@mixin cover($z-val: 999, $is-fullscreen: false, $bg: null, $opacity: null) { ... }

Description

Makes an element cover 100% of the screen or cover 100% of the closet stacking context.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$z-val`	A z-index number value	`Number`	`999`
`$is-fullscreen`	A flag indicating whether the element will attempt to cover the entire viewport rather than just covering the nearest stacking context. This is not 100% reliable, depending on the stacking context properties of the elements in the parent chain.	`Bool` or `String`	`false`
`$bg`	The shorthand `background` property's value.	`Color` or `Mixed`	`null`
`$opacity`	A decimal value between 0 and 1 or a percentage value between 0% and 100%.	`Number`	`null`

Throws

Invalid $is-fullscreen value of #{meta.inspect($is-fullscreen)}
Invalid $z-val value of #{meta.inspect($z-val)} passed to the
Invalid $opacity value of #{meta.inspect($opacity)} passed
Invalid unit type for $opacity passed to the [ cover() ] mixin.
Invalid $opacity data type. You passed #{meta.inspect($opacity)}

Requires

[function] is-alias
[function] equals-false
[function] equals-true
[function] is-list
[function] is-number
[function] is-percentage
[function] is-string
[function] list-to-string
[function] strip-unit

debug

@mixin debug() { ... }

Description

A Debugging tool -- Do not use in production -- Apply to a class on the <body> and it will apply different colored borders to all the children so you can see the outlines of every element. Perfect for precision layout tweaks. It will also add indicators for some potential mistakes like hardcoded inline styles, forgetting an alt tag on an image, left the alt blank, etc.

Specific indicators to look for are:

An with no alt tag will be red saturated with a red border
An with an empty alt tag will have a yellow border
An with a filled alt tag will have a green border
An with not title attribute will be red
An with an empty href or just href="#" will be yellow
An with a title attribute will have a green border
Elements with hardcoded inline stlyes or empty class or id attributes will be yellow.

Parameters

None.

Requires

[variable] color-alert
[variable] indicator-colors

depth-level

@mixin depth-level($level, $color: #000, $intensity: 1) { ... }

Description

Uses box-shadow to give an element a depth effect based on Google's Material Design principles.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$level`	Depth level (Must be between 0 and 5, inclusive). This value will change the strength of the shadow effect, with 0 being off, 1 being the lowest effective level, and 5 being the strongest. The higher the value, the deeper the shadow, the more the effect makes the element look like it is lifted off the screen.	`Number`	— none
`$color`	The color of the box-shadow effect.	`Color`	`#000`
`$intensity`	An optional value that is multiplied with the default color opacity to increase or decrease the intensity of the effect.	`Number`	`1`

Throws

Invalid $level of [ #{meta.inspect($level)} ] used in the
Invalid $intensity of [ #{meta.inspect($intensity)} ] used in the
Invalid $color of [ #{meta.inspect($color)} ] used in the

Requires

[function] bottom-shadow
[function] top-shadow
[function] conv-color
[function] is-integer
[function] is-number

disable-outline

@mixin disable-outline() { ... }

Description

Removes the focus ring around an element when a mouse input is detected.

Parameters

None.

expand-action-area

Since 0.17.0

@mixin expand-action-area($by: 10px) { ... }

Description

Occasionally, an icon or button may need a larger interaction area, especially for touch screens. This mixin adds a before pseudo-element that increases the click/touch area by a given length in every direction.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$by`	The length to expand the interaction area.	`Number`	`10px`

Throws

Invalid length of #{meta.inspect($by)} passed to the

Requires

[function] is-length

first

@mixin first($num) { ... }

Description

Select all children of an element from the first to $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	All child elements counted from the first to this number will be selected.	`Number`	— none

Example

ul li {
  background: blue;

  @include first(3) {
    background: red
  }
} // Compiles to...
ul li {
  background: blue;
}
ul li:nth-child(-n + 3) {
  background: red;
}

Throws

Invalid input for $num in the [ first() ] mixin. This

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

first-of-type

@mixin first-of-type($num) { ... }

Description

Select all children of type from the first to $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	All child elements counted from the first to this number will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ first-of-type() ] mixin. This

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

first-of-any

@mixin first-of-any($num: 1, $selector) { ... }

Description

Uses the new selector list argument of :nth-child syntax to select any children of a given selector, similar to :first-of-type but allows for any selector. Because this is a new feature, it only has 92% browser support and will only work on Chrome or Edge 111+, Safari 9+, Firefox 113+, Opera 98+, and Android Browser 122+.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	All child elements counted from the first to this number that match the given selector. Must be an integer value.	`Number` or `String`	`1`
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $num in the [ first-of-any() ] mixin. This
Invalid input for $selector in the [ after-first-of-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

last

@mixin last($num) { ... }

Description

Select all children from the last to $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	All child elements counted from the last to this number will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ last() ] mixin. This

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

last-of-type

@mixin last-of-type($num) { ... }

Description

Select all children of type from the last to $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	All child elements counted from the last to this number will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ last-of-type() ] mixin. This

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

last-of-any

@mixin last-of-any($num: 1, $selector) { ... }

Description

Uses the new selector list argument of :nth-last-child syntax to select any children of a given selector, starting from the last. Similar to :last-of-type but allows for any selector, not just a type selector. Because this is a new feature, as of March 2024 it only has 92% browser support and will only work on Chrome or Edge 111+, Safari 9+, Firefox 113+, Opera 98+, and Android Browser 122+.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Mixin will select all these child elements counted from the last that match the given selector. Must be an integer.	`Number` or `String`	`1`
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $num in the [ last-of-any() ] mixin. This
Invalid input for $selector in the [ last-of-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

after-first

@mixin after-first($num) { ... }

Description

Select all children after the first to $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	After the first child elements of this quantity, all children are selected.	`Number`	— none

Throws

Invalid input for $num in the [ after-first() ] mixin. This

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

after-first-of-any

@mixin after-first-of-any($num, $selector) { ... }

Description

Uses the new selector list argument of :nth-child syntax to select all children after the first to $num of any given selector. Because this is a new feature, it only has 92% browser support and will only work on Chrome or Edge 111+, Safari 9+, Firefox 113+, Opera 98+, and Android Browser 122+.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	After the first child elements of this quantity that match the given selector, all children are selected.	`Number`	— none
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $num in the [ after-first-of-any() ] mixin. This
Invalid input for $selector in the [ after-first-of-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

from-end

@mixin from-end($num) { ... }

Description

Select all children before $num from the last.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	This number back from the last child element will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ from-end() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

between

@mixin between($first, $last) { ... }

Description

Select all children between $first and $last.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$first`	The first child element that will be selected, counted from the start. This child element and all others up to and including $last are selected.	`Number`	— none
`$last`	The last child element that will be selected, counted from the start. This child element and all before it up to and including $first are selected.	`Number`	— none

Throws

Invalid input for $first or $last in the [ between() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

between-any

@mixin between-any($first, $last, $selector) { ... }

Description

Uses the new selector list argument of :nth-child syntax to select all children between $first of a selector and $last of a selector. Because this is a new feature, it only has 92% browser support and will only work on Chrome or Edge 111+, Safari 9+, Firefox 113+, Opera 98+, and Android Browser 122+.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$first`	The first child element that will be selected, counted from the start. This child element and all others up to and including $last are selected if they match $selector.	`Number`	— none
`$last`	The last child element that will be selected, counted from the start. This child element and all before it up to and including $first are selected if they match $selector.	`Number`	— none
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $first or $last in the [ between-any() ] mixin.
Invalid input for $selector in the [ between-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

even-between

@mixin even-between($first, $last) { ... }

Description

Select all evenly numbered children between $first and $last.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$first`	The first child element of the selection range, counted from the start. Will only be selected if it is evenly numbered.	`Number`	— none
`$last`	The last child element of the selection range, counted from the start. WIll only be selected if it is evenly numbered.	`Number`	— none

Throws

Invalid input for $first or $last in the [ even-between() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

even-between-any

@mixin even-between-any($first, $last, $selector) { ... }

Description

Uses the new selector list argument of :nth-child syntax to select all even numbered children of a given selector that are between the $first and $last child. Because is a new feature, it only has 92% browser support and will only work on Chrome or Edge 111+, Safari 9+, Firefox 113+, Opera 98+, and Android Browser 122+.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$first`	The first child element that will be selected, counted from the start. This child element and all others up to and including $last are selected if they match $selector.	`Number`	— none
`$last`	The last child element that will be selected, counted from the start. This child element and all before it up to and including $first are selected if they match $selector.	`Number`	— none
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $first or $last in the [ even-between-any() ] mixin.
Invalid input for $selector in the [ even-between-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

odd-between

@mixin odd-between($first, $last) { ... }

Description

Select all odd children between $first and $last.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$first`	The first child element that will be counted, selecting even numbered children from the start that match $selector.	`Number`	— none
`$last`	The last child element that will be counted, selecting even numbered children from the start that match $selector.	`Number`	— none

Throws

Invalid input for $first or $last in the [ odd-between() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

odd-between-any

@mixin odd-between-any($first, $last, $selector) { ... }

Description

Uses the new selector list argument of :nth-child syntax to select all odd numbered children of a given selector that are between the $first and $last child. Because is a new feature, it only has 92% browser support and will only work on Chrome or Edge 111+, Safari 9+, Firefox 113+, Opera 98+, and Android Browser 122+.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$first`	The first child element that will be counted, selecting odds numbered children from the start that match $selector.	`Number`	— none
`$last`	The last child element that will be counted, selecting odds numbered children from the start that match $selector.	`Number`	— none
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $first or $last in the [ odd-between-any() ] mixin.
Invalid input for $selector in the [ odd-between-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

n-between

@mixin n-between($num, $first, $last) { ... }

Description

Select all $num children between $first and $last.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Select every $num items for the range set by $first and $last parameters.	`Number`	— none
`$first`	The starting number for the selection range, counted from the start.	`Number`	— none
`$last`	The ending number for the selection range, counted from the start.	`Number`	— none

Throws

Invalid input for $num, $first, or $last in the [ n-between() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

n-between-any

@mixin n-between-any($num, $first, $last, $selector) { ... }

Description

Uses the new selector list argument of :nth-child syntax to select all $num children of a given selector that are between the $first and $last child. Because is a new feature, it only has 92% browser support and will only work on Chrome or Edge 111+, Safari 9+, Firefox 113+, Opera 98+, and Android Browser 122+.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Select every $num items that match $selector for the range set by $first and $last parameters.	`Number`	— none
`$first`	The starting number for the selection range, counted from the start.	`Number`	— none
`$last`	The ending number for the selection range, counted from the start.	`Number`	— none
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $num, $first, or $last in the [ n-between-any() ] mixin.
Invalid input for $selector in the [ n-between-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

all-but

@mixin all-but($num) { ... }

Description

Select all children but $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	All child elements are selected except for $num.	`Number`	— none

Throws

Invalid input for $num in the [ all-but() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

each

@mixin each($num) { ... }

Description

Select each child every $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Every $num child elements, a child is selected.	`Number`	— none

Throws

Invalid input for $num in the [ each() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

each-of-any

@mixin each-of-any($num, $selector) { ... }

Description

Select each child every $num that matches $selector.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Every $num child elements, a child is selected.	`Number`	— none
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $num in the [ each-of-any() ] mixin.
Invalid input for $selector in the [ each-of-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

from-first-last

@mixin from-first-last($num) { ... }

Description

Select the $num child from the start and the $num child from the last.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	The child element that is $num from the start, as well as the child element that is $num from the end, will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ from-first-last() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

from-first-last-any

@mixin from-first-last-any($num, $selector) { ... }

Description

Select the $num child from the start that match $selector, and the $num child from the last that match $selector.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	The child element that is the $num matching the $selector from the start, as well as the child element that is $num matching $selector from the end, will be selected.	`Number`	— none
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $num in the [ from-first-last-any() ] mixin.
Invalid input for $selector in the [ from-first-last-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

middle

@mixin middle($num) { ... }

Description

Select the item in the middle of $num child. Only works with odd number chain.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Count $num child elements from the start and the middle element of that selection range will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ middle() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

all-but-first-last

@mixin all-but-first-last($num) { ... }

Description

Select all children between the $num first and the $num last inclusively.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Count $num children from the start and from the end and all other child elements except for those will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ all-but-first-last() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

all-but-first-last-of-any

@mixin all-but-first-last-of-any($num) { ... }

Description

Select all children between the $num first that matches the $selector and the $num last that matches the $selector inclusively.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Count $num children from the start that match the $selector and from the end that match $selector, and all other child elements except for those will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ all-but-first-last-of-any() ] mixin.
Invalid input for $selector in the [ all-but-first-last-of-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

first-of

@mixin first-of($limit) { ... }

Description

This quantity-query mixin will only select the first of $limit items. It will not work if the quantity of child elements is less than $limit.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$limit`	If the quantity of child elements is equal to or greater than `$limit`, the first of those elements is selected.	`Number`	— none

Throws

Invalid input for $limit in the [ first-of() ] mixin.

Requires

[function] first-of
[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

last-of

@mixin last-of($limit) { ... }

Description

This quantity-query mixin will only select the last of $limit items. It will not work if the quantity of child elements of the same type is less than $limit.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$limit`	If the quantity of child elements of the same type is greater than or equal to `$limit`, the last of those elements, determined by `$limit`, is selected.	`Number`	— none

Throws

Invalid input for $limit in the [ last-of() ] mixin.

Requires

[function] last-of
[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

at-least

@mixin at-least($num) { ... }

Description

This quantity-query mixin will select every items if there is at least $num items. It will not select anything if there is not as many item as $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	If the number of child elements is equal to or greater than this number, then all will be selected. If the number of child elements is less than this number, then none are selected.	`Number`	— none

Throws

Invalid input for $num in the [ at-least() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

at-least-any

@mixin at-least-any($num, $selector) { ... }

Description

This quantity-query mixin will select every item if there is at least $num items that match the given selector, starting with the first item that matches the selector. It will not select anything if there is not as many item as $num that match the given selector.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	If the number of child elements matching $selector is equal to or greater than this number, then all will be selected. If the number of child elements matching $selector is less than this number, then none are selected.	`Number`	— none
`$selector`	Pass the selector as an unquoted string.	`String`	— none

Throws

Invalid input for $num in the [ at-least-any() ] mixin.
Invalid input for $selector in the [ at-least-any() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

at-most

@mixin at-most($num) { ... }

Description

This quantity-query mixin will select every item if there is at most $num items. It will not select anything if there are more children than the quantity of $num.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	If the number of child elements is equal to or less than this number, then all will be selected.	`Number`	— none

Throws

Invalid input for $num in the [ at-most() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

in-between

@mixin in-between($min, $max) { ... }

Description

This quantity-query mixin will select every items there is between $min and $max items. If the quantity of child elements is less than the $min or greater than the $max, none will be selected. If the quantity is in range, all will be selected.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$min`	The minimum number of children	`Number`	— none
`$max`	The maximum number of children	`Number`	— none

Throws

Invalid input for $min or $max in the [ in-between() ] mixin.

Requires

[function] is-integer

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

first-child

@mixin first-child() { ... }

Description

Select the first exact child element.

Parameters

None.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

last-child

@mixin last-child() { ... }

Description

Select the last exact child element.

Parameters

None.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

even

@mixin even() { ... }

Description

Select all evenly numbered child elements.

Parameters

None.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

even-of-any

@mixin even-of-any($selector) { ... }

Description

Select all evenly numbered child elements that match $selector.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $selector in the [ each-of-any() ] mixin.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

odd

@mixin odd() { ... }

Description

Select all odd numbered child elements.

Parameters

None.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

odd-of-any

@mixin odd-of-any($selector) { ... }

Description

Select all odd numbered child elements that match $selector.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$selector`	Pass the selector as a quoted string.	`String`	— none

Throws

Invalid input for $selector in the [ odd-of-any() ] mixin.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

first-last

@mixin first-last() { ... }

Description

Select only the first and last child element.

Parameters

None.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

unique

@mixin unique() { ... }

Description

Will only select the child if it is unique. If it has any sibling elements then none will be selected.

Parameters

None.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

not-unique

@mixin not-unique() { ... }

Description

Will only select children if they are not unique. Meaning if there is at least 2 children, the style is applied.

Parameters

None.

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

child-index

@mixin child-index($num, $direction: 'forwards', $index: 0) { ... }

Description

This mixin is used to automatically sort z-index in numerical order. But it can also sort them in reverse-numerical order, depending the parameters you select.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$num`	Number of children to index.	`Number`	— none
`$direction`	Direction of the sort. Can be `forwards`, `backwards`, or one of a number of alias values for these two words, such as `forward`, `front`, `back`, `backward`, or just `f`, or `b`.	`String`	`'forwards'`
`$index`	Base indexing number for the sort.	`Number`	`0`

Throws

Invalid $direction value of #{meta.inspect($direction)} for

Requires

[function] is-string
[function] is-alias
[function] is-alias
[function] order-index

Authors

Lucas Bonomi < @lukyvj -- lucasbonomi.com >
Stephen Irving < @metric_dev -- stephenirving.net >
_family.scss is a set of 40+ smart Sass mixins which will help you to manage the style of relational elements, in an easy and classy way.
The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three
Most mixins forked from the family.scss library

flex-center

@mixin flex-center($horizontal: true, $vertical: true, $flex-dir: 'row', $support-all: false) { ... }

Description

Uses flexbox to vertically and/or horizontally center an element, as well as set its flex-direction property.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$horizontal`	Pass `true` or `horizontal` to center the contents horizontally.	`Bool` or `String`	`true`
`$vertical`	Pass `true` or `vertical` to center the contents vertically.	`Bool` or `String`	`true`
`$flex-dir`	The flex-direction value.	`String`	`'row'`
`$support-all`	If you pass `true` or `yes`, or `t` or `y` or `legacy` or `all`, the mixin will also provide all the fallback legacy flexbox syntax to support the widest possible range of browsers.	`Bool` or `String`	`false`

Throws

Invalid $horizontal value for the [ flex-center() ] mixin.
Invalid $vertical value for the [ flex-center() ] mixin.
Invalid $flex-dir value of #{meta.inspect($flex-dir)} passed

Requires

[function] equals-false
[function] equals-true
[function] is-alias
[function] is-global-value
[function] is-list
[function] is-string
[function] list-to-string

fluid-media

@mixin fluid-media() { ... }

Description

Keep images from scaling beyond the width of their parents and help them maintain their aspect ratio more easily.

Parameters

None.

font-face

@mixin font-face($name, $path, $weight: null, $style: null, $display: swap, $extensions: eot woff2 woff ttf svg) { ... }

Description

Easy importer for font-face properties

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	Name of the font family, without extension.	`String`	— none
`$path`	['assets/fonts'] Path from the compiled css to the fonts folder.	`String`	— none
`$weight`	Weight of the font.	`Number` or `String`	`null`
`$style`	Style of the font.	`String`	`null`
`$display`	The value for the `font-display` property.	`String`	`swap`
`$extensions`	Font format extensions.	`List`	`eot woff2 woff ttf svg`

Example

@include font-face('Samplina Neue', 'assets/fonts', bold, italic);

@font-face {
  font-family: 'Samplina Neue';
  font-style: italic;
  font-weight: bold;
  src: url('fonts/SamplinaNeue.eot?') format('eot'),
    url('fonts/SamplinaNeue.woff2') format('woff2'),
    url('fonts/SamplinaNeue.woff') format('woff'),
    url('fonts/SamplinaNeue.ttf') format('truetype'),
    url('fonts/SamplinaNeue.svg#Samplina_Neue') format('svg');
  font-display: swap;
}

Requires

[function] str-replace

font

@mixin font($size: null, $weight: null, $style: null, $variant: null, $height: null, $family: null, $spacing: null, $stretch: null, $kern: null) { ... }

Description

Easily generates the appropriate typographic properties for the given values, following the W3C specifications.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The font-size value.	`Number`	`null`
`$weight`	The font-weight value.	`Number` or `String`	`null`
`$style`	The font-style value.	`String`	`null`
`$variant`	The font-variant value.	`String`	`null`
`$height`	The line-height value.	`Number`	`null`
`$family`	The font-family value.	`String` or `List`	`null`
`$spacing`	The letter-spacing value.	`Number`	`null`
`$stretch`	The font-stretch value.	`String`	`null`
`$kern`	The font-kerning value.	`String`	`null`

Throws

Error, invalid $kern keyword value for font-kerning property.

Requires

[function] font

ghost-button

@mixin ghost-button($font-size, $font-color, $font-fam, $border-width, $border-color, $padding, $transition-duration, $text-hover-color) { ... }

Description

Generates a ghost button. Since background and border-color are both low-performance animation properties, the hover effect for the background and border instead uses the pseudo-element ::after and an opacity transition.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$font-size`	The font-size value.	`Number`	— none
`$font-color`	The font's color.	`Color`	— none
`$font-fam`	The font family used in the button.	`String` or `List`	— none
`$border-width`	The border-width for the button.	`Number`	— none
`$border-color`	The border-color for the button.	`Color`	— none
`$padding`	The button's padding shorthand property.	`Number`	— none
`$transition-duration`	The button's transition duration.	`Number`	— none
`$text-hover-color`	The text color of the button's hover state.	`Color`	— none

Throws

Invalid $border-width input for the [ ghost-button() ] mixin.
Invalid $transition-duration input for the [ ghost-button() ]

Requires

[function] is-string
[function] is-length
[function] is-calculation
[function] is-time
[function] is-calculation
[function] is-global-value
[mixin] transition-color

gradient

@mixin gradient($start-color, $end-color, $orientation: 'to right', $start-position: 0%, $end-position: 100%, $is-for-text: false, $is-repeating: false, $support-all: false) { ... }

Description

A robust and well supported down-n-dirty gradient mixin.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$start-color`	The starting color in the gradient.	`Color`	— none
`$end-color`	The ending color in the gradient.	`Color`	— none
`$orientation`	The orientation of the grandient. Can be an angle value or one of the orientation keywords used with gradients, `to top`, `to top right`, `to right`, `to bottom right`, `to right`, `to bottom left`, `to left`, `to top left`, or one of the alias values for these orientations.	`String` or `Number`	`'to right'`
`$start-position`	Starting position percentage of the gradient. Can be a 1 or 2 value percentage.	`Number` or `List`	`0%`
`$end-position`	Ending position percentage of the gradient. Can be a 1 or 2 value percentage.	`Number` or `List`	`100%`
`$is-for-text`	If true, will apply the gradient to text rather than to the background. Valid values equivalent to `true` also include `yes`, `y`, `t`, `text`, `txt`, `for-text`, `fortext`, `fortxt`, `on-text`, `on-txt`, `ontext`, and `ontxt`.	`Bool` or `String`	`false`
`$is-repeating`	If true, will use the `repeating-linear-gradient()` and `repeating-radial-gradient()` CSS functions rather than the non-repeating `linear-gradient()` and `radial-gradient` functions. Valid values equivalent to `true` also include `yes`, `y`, `t`, `repeat,`repeats`,`repeating`,`rep`and`r`. All other values will be interpreted as`false`.	`Bool` or `String`	`false`
`$support-all`	If true, will support as many browsers and devices as possible. Valid values equivalent to `true` also include `yes`, `y`, `t`, `legacy`, `supports`, `support`, and `all`. All other values will be interpreted as `false`.	`Bool` or `String`	`false`

Throws

Invalid $orientation value of #{meta.inspect($orientation)} for

Requires

[function] conv-color
[function] equals-true
[function] is-alias
[function] is-angle
[function] is-string
[function] is-list
[function] is-number
[function] is-percentage
[function] list-to-string

hamburger

@mixin hamburger($color: #112, $color-hover: hsl(0 0% 54.12%), $width: 20px, $height: $width * 0.8, $bars: 3, $thickness: to-fixed(math.div($width, 6 + $bars), 3), $transition:) { ... }

Description

Creates a menu icon 'hamburger' with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	Color to use for the icon.	`Color`	`#112`
`$color-hover`	Color to use when the icon is hovered over.	`Color`	`hsl(0 0% 54.12%)`
`$width`	Width of the icon.	`Number`	`20px`
`$height`	Total height of the icon.	`Number`	`$width * 0.8`
`$bars`	Number of bars in the icon.	`Number`	`3`
`$thickness`	Height of individual bars or 'patties' in the hamburger.	`Number`	`to-fixed(math.div($width, 6 + $bars), 3)`
`$transition:`	The transition property you want to apply to the hover and active states of the hamburger button.	`List`	— none

Requires

[function] tint
[function] to-fixed

hide-visually

@mixin hide-visually($focusable: false) { ... }

Description

Hide an element only visually, while leaving it available for screen readers.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$focusable`	If truthy, it will allow the element to be focusable when navigated to via the keyboard.	`Bool`	`false`

hide-visually-focusable

@mixin hide-visually-focusable() { ... }

Description

Apply only the properties necessary to make an already visually hidden element focusable.

Parameters

None.

show-visually

@mixin show-visually() { ... }

Description

Reverses the effects of the hide-visually() mixin.

Parameters

None.

hide

@mixin hide($maintain-layout: false) { ... }

Description

Thoroughly hide an element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$maintain-layout`	If true, it will hide the element but without removing the element from the layout structure. If false it will hide the element and remove it from the DOM's layout structure.	`Bool`	`false`

Throws

Incorrect value of #{meta.inspect($maintain-laout)} for the

hoctive

Since 0.14.0

@mixin hoctive() { ... }

Description

A simple utility mixin that selects the :hover, :focus, and :active pseudo-classes at the same time and applies the content's directives.

Parameters

None.

hocus

@mixin hocus() { ... }

Description

A simple utility mixin that selects both of the :hover and :focus pseudo-classes at the same time and applies the content's directives.

Parameters

None.

inner-side-shadow

Since 0.8.1 — <p>Was not working in previous versions.</p>

@mixin inner-side-shadow($side: 'bottom', $size: 20px, $color: hsl(0, 0%, 0%, 0.33) { ... }

Description

Creates an inner box-shadow for only one side of an element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$side`	The inner side of the element where the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.	`String`	`'bottom'`
`$size`	The width of the shadow on the target side. Used in combination with $side to calculate all the values for the box-shadow.	`Number`	`20px`
`$color`	The color of the shadow.	`Color`	`hsl(0, 0%, 0%, 0.33`

Throws

Invalid $size input for the [ inner-side-shadow() ] mixin.
Invalid $side value of #{meta.inspect($side)} for the

Requires

[function] is-alias
[function] is-length
[function] is-number
[function] is-string

long-shadow

@mixin long-shadow($color: hsla(0, 0%, 15%, 0.95), $longness: 20) { ... }

Description

Creates a long shadow effect on text.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color of the long shadow.	`Color`	`hsla(0, 0%, 15%, 0.95)`
`$longness`	Used to calculate the length of the shadow. Must be a unitless integer greater than 0.	`Number`	`20`

Throws

Invalid input for $longness in the [ long-shadow() ]

Requires

[function] is-integer
[function] make-long-shadow

nav-divider

@mixin nav-divider($color: #e5e5e5) { ... }

Description

Add horizontal dividers (basically an hr) within dropdowns and nav lists.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The color of the dividing line.	`Color`	`#e5e5e5`

Requires

[variable] spacer

on-event

@mixin on-event($self: false) { ... }

Description

When we want to give an element some ‘attention’. Event wrapper to set :hover, :focus, and :active pseudo-classes all at once with one selector group. Will also set the style of the element it is applied to, along with the :link, and :visited pseudo-classes if anything but null or false is passed to the only argument.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$self`	If this is set to `true`, the selector used for the content directiive will include the element itself, plus `&:link`, and `&:visited` in addition to the `&:hover`, `&:focus` and `&:active` selectors which are always applid by default.	`Bool` or `*`	`false`

only-between-widths

@mixin only-between-widths($min-threshold, $max-threshold, $convert) { ... }

Description

Nest a combined max-width and min-width media query within a selector or on its own. If $convert is set to true, will convert rem or px $threshold widths into em unit widths.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$min-threshold`	The minimum screen dimension for the style.	`Number`	— none
`$max-threshold`	The maximum screen dimension for the style.	`Number`	— none
`$convert`	Attempts to convert the $threshold value into `em` units if the lengths passed are in `px` or `rem` units.	`Bool`	— none

Throws

Invalid breakpoint $threshold of #{meta.inspect($threshold)}

Requires

[function] is-number
[function] is-number
[function] is-length
[function] is-length
[function] strip-unit
[function] conv-to-em
[function] strip-unit
[function] conv-to-em

only-chromium

@mixin only-chromium() { ... }

Description

Uses a media query to apply the given styles only to Chromium browesers, Works on Chromium versions 29 and up.

Parameters

None.

only-hidpi

@mixin only-hidpi($ratio: 1.25) { ... }

Description

Targets only HiDPI/Retina displays using a media query.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ratio`	A minimum pixel ratio resolution value used to calculate the media query.	`Number`	`1.25`

Used by

[mixin] only-retina

only-retina

@mixin only-retina($ratio: 2) { ... }

Description

Targets only HiDPI/Retina displays using a media query.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ratio`	A minimum pixel ratio resolution value used to calculate the media query.	`Number`	`2`

Requires

[mixin] only-hidpi

only-ie

@mixin only-ie($version: null, $version-max: $version) { ... }

Description

Uses media queries to apply the given styles to a given range of Internet Explorer versions only. Targets several different possible range combinations between IE 6 and IE 11. Pass only one value to attempt to only target that version of IE. Version arguments are inclusive to that version. Only accepts integer version numbers for the big releases, do not attempt to pass it a version number with decimal notation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$version`	An IE version to target, or the first version to target in range set by the subsequent argument. If no value (or a `null` or `false` value) is passed, the mixin will target the most modern versions of IE available, 10 and 11.	`Number`	`null`
`$version-max`	The final IE version to target in a range. If no value is passed, the mixin will attempt to target just the version number given by $version.	`Number`	`$version`

Throws

Invalid data type passed to the [ only-ie() ] mixin. You must pass
The second argument in the [ only-ie() ] mixin, $version-max, must be a
Invalid data range for the [ only-ie() ] mixin. You must choose to
The [ only-ie() ] mixin cannot target a version range that begins with
The [ only-ie() ] mixin can target IE 8, 9, and 10, but not any

only-legacy-edge

@mixin only-legacy-edge() { ... }

Description

Apply the given styles to Legacy Microsoft Edge (pre-WebKit, version 1-18).

Parameters

None.

legacy-edge-only

@mixin legacy-edge-only() { ... }

Description

Apply the given styles to Legacy Microsoft Edge (pre-WebKit, version 1-18).

Parameters

None.

target-legacy-edge

@mixin target-legacy-edge() { ... }

Description

Apply the given styles to Legacy Microsoft Edge (pre-WebKit, version 1-18).

Parameters

None.

only-moz

@mixin only-moz($target-versions: null) { ... }

Description

Uses @supports queries and a hack using @-moz-document url-prefix() to apply the given styles to either all version of Gecko based Mozilla browsers, only Quantam (Stylo) Mozilla browsers, or only legacy (pre-Stylo) Mozilla browsers.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$target-versions`	Pass nothing, `null`, `false`, `both`, `none` or `no` to not target any specific version of Gecko based Mozilla browsers (basically targetting all of them). To target only newer, Quantam Mozilla browsers, pass `quantam`, `q`, `new`, `modern`, `stylo`, or `green`. To target Legacy (pre-Stylo) Mozilla browsers, pass `true`, `legacy`, `old`, or `pre-stylo`.	`Bool` or `String`	`null`

Used by

[mixin] flip-scale-2
[mixin] flip-scale
[mixin] flip
[mixin] rotate-scale
[mixin] rotate
[mixin] slit

only-over-width

@mixin only-over-width($threshold, $convert) { ... }

Description

Nest a simple min-width media query within a selector or on its own. If $convert is set to true, will convert $threshold values in rem or px units into em unit widths.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$threshold`	The minimum screen dimension for the style. If a unitless number is passed, is is assumed to be in pixels.	`Number`	— none
`$convert`	Attempts to convert the $threshold value into `em` units if the length passed is in `px` or `rem` units.	`Bool`	— none

Throws

Invalid breakpoint $threshold of #{meta.inspect($threshold)}

Requires

[function] is-number
[function] is-length
[function] strip-unit
[function] conv-to-em

only-phones

Since 0.8.2 — <p>Was not working in previous versions</p>

@mixin only-phones($max-phone-width: 436px, $target-all-devices: false, $min-resolution-ratio: 1.8) { ... }

Description

Targets phones and phone-sized devices

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$max-phone-width`	The maximum viewport width of the devices being targeted.	`Number`	`436px`
`$target-all-devices`	If true, query will target all devices that fall within the specified maximum viewport width. Otherwise, attempts to target only phone devices by setting a minimum resolution along with the maximum viewport width.	`Bool`	`false`
`$min-resolution-ratio`	A minimum pixel ratio resolution value used to calculate the media query if $target-all-devices is false.	`Number`	`1.8`

Requires

[function] conv-to-em
[function] strip-unit

only-safari

@mixin only-safari() { ... }

Description

Uses a media query to apply the given styles to the Safari browser, versions 10.1 and up.

Parameters

None.

only-under-width

@mixin only-under-width($threshold, $convert) { ... }

Description

Nest a simple max-width media query within a selector or on its own. If $convert is set to true, will convert rem or px $threshold widths into em unit widths.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$threshold`	The maximum screen dimension for the style. If a unitless number is passed, is is assumed to be in pixels.	`Number`	— none
`$convert`	Attempts to convert the $threshold value into `em` units if the length passed is in `px` or `rem` units.	`Bool`	— none

Throws

Invalid breakpoint $threshold of #{meta.inspect($threshold)}

Requires

[function] is-number
[function] is-length
[function] strip-unit
[function] conv-to-em

only-webkit

@mixin only-webkit() { ... }

Description

Apply the given styles to WebKit-based browsers, including Safari, Edge, Chrome, and any other WebKit browser.

Parameters

None.

opacity

@mixin opacity($opacity) { ... }

Description

Takes a given value in either 0-1 decimal or 2-100 integer scale and applies that level of opacity.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$opacity`	The opacity level. Can take a decimal beteen 0 and 1 inclusive, or either a unitless integer or a percentage between 1 exclusive and 100 inclusive.	`Number`	— none

Throws

Invalid opacity value of #{meta.inspect($opacity)} passed to

placeholder

@mixin placeholder() { ... }

Description

Add the styles for the placeholder/watermark for an input element to all the different vendor prefixes at once with a single statement.

Parameters

None.

position-center

@mixin position-center($position: relative) { ... }

Description

Centers the element inside of its first parent using a method combining positioning and translation.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	The position value desired, must use either relative or absolute positioning. If you use absolute positioning, you should apply `position: relative` to the parent element.	`String`	`relative`

position-horizontally

@mixin position-horizontally($left-pos: 50%, $position: relative) { ... }

Description

Horizontally aligns an alement using relative or absolute positioning and transform. You can modify the $left-pos argument to change the left property's value to alter the horizontal alignment. If you want to center the element both horizontally and vertically, use the position-center mixin instead.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$left-pos`	The top property value. 50% will put the element in the vertical center.	`Number`	`50%`
`$position`	The position value desired, must use either relative or absolute positioning. If you use absolute positioning, you should apply `position: relative` to the parent element.	`String`	`relative`

Throws

The left position value of #{meta.inspect($left-pos)} is out of
The $position value of #{meta.inspect($position)} used in the

center-horizontally

@mixin center-horizontally($position: relative) { ... }

Description

Absolutely centers the element inside of its first parent using a method combining positioning and translation. If you want to center the element both horizontally and vertically, use the position-center() mixin instead.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	The position value desired, must use either relative or absolute positioning. If you use absolute positioning, you should apply `position: relative` to the parent element.	`String`	`relative`

Throws

The $position value of #{meta.inspect($position)} used in the

position-vertically

@mixin position-vertically($top-pos: 50%, $position: relative) { ... }

Description

Vertically aligns an alement using relative or absolute positioning and transform. You can modify the $top-pos argument to change the top property's value to alter the vertical alignment. If you want to center the element both horizontally and vertically, use the position-center() mixin instead.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$top-pos`	The top property value. 50% will put the element in the vertical center.	`Number`	`50%`
`$position`	The position value desired, must use either relative or absolute positioning. If you use absolute positioning, you should apply `position: relative` to the parent element.	`String`	`relative`

Throws

The top position value of #{meta.inspect($top-pos)} is out of
The $position value of #{meta.inspect($position)} used in the

center-vertically

@mixin center-vertically($position: relative) { ... }

Description

Vertically centers the element inside of its first parent using a method combining positioning and translation. If you want to center the element both horizontally and vertically, use the position-center() mixin instead.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	The position value desired, must use either relative or absolute positioning. If you use absolute positioning, you should apply `position: relative` to the parent element.	`String`	`relative`

Throws

The $position value of #{meta.inspect($position)} used in the

position

@mixin position($position: absolute, $top: 0, $left: 0, $bottom: null, $right: null, $z-index: null) { ... }

Description

Applies position values to an element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	The position value for the element.	`String`	`absolute`
`$top`	The `top` value for the element.	`Number`	`0`
`$left`	The `left` value for the element.	`Number`	`0`
`$bottom`	The `bottom` value for the element.	`Number`	`null`
`$right`	The `right` value for the element.	`Number`	`null`
`$z-index`	The z-index value for the element.	`Number`	`null`

Throws

The $position value of #{meta.inspect($position)} used in the

Requires

[function] is-global-value

prefix

@mixin prefix($declarations, $prefixes: webkit moz ms o) { ... }

Description

Applies vendor prefixes to as many properties as it is given.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$declarations`	Declarations to prefix. Pass a map of key:value pairs.	`Map`	— none
`$prefixes`	List of prefixes to use.	`List`	`webkit moz ms o`

Output

Each property with the chosen vendor prefixes as well as the standard, non-prefixed declarations.

reset-list

@mixin reset-list() { ... }

Description

Resets an ordered, unordered, or detail list to have no inherent list style, margin or padding.

Parameters

None.

reset-text

@mixin reset-text($reset-size: false, $reset-wrap: false) { ... }

Description

Resets text properties. If you want to reset font-size and word-wrap (aka overflow-wrap) as well, pass true for those parameters.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$reset-size`	Pass true to also reset `font-size`.	`Bool`	`false`
`$reset-wrap`	Pass true to also reset `word-wrap`.	`Bool`	`false`

Requires

[function] equals-true
[variable] base-font-size

reset

@mixin reset() { ... }

Description

Does a hard reset of the styles on an element.

Parameters

None.

resizable

@mixin resizable($resize: vertical) { ... }

Description

Make an element resizable.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$resize`	The way to make an element resizable. Can be `horizontal`, `vertical`, `block`, `inline` or `both`. Can also be any CSS global value.	`String`	`vertical`

Output

Adds the correct resize and overflow values to the element.

Throws

Invalid $resize value of #{meta.inspect($resize)} for the

Requires

[function] is-alias
[function] is-global-value

responsive-font

@mixin responsive-font($responsive, $min, $max, $fallback) { ... }

Description

A way to generate viewport sized typography with minimum and maximum values through the use of calculated media queries. A fork of a mixin by Eduardo Boucas.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$responsive`	Viewport-based size	`Number`	— none
`$min`	Minimum font size (px)	`Number`	— none
`$max`	Maximum font size (px) (optional)	`Number`	— none
`$fallback`	Fallback for viewport-based units (optional)	`Number`	— none

Example

// A 5vw font size (with 50px fallback),
// A min of 35px and max of 150px:
.element {
  @include responsive-font(5vw, 35px, 150px, 50px);
}

Author

Eduardo Boucas <@eduardoboucas>

[private] _responsive-element-styles

@mixin _responsive-element-styles() { ... }

Description

Provides the styles for the child element that is being kept at the given ratio provided in the responsive-ratio() mixin.

Parameters

None.

Used by

[mixin] responsive-ratio
[mixin] responsive-ratio

responsive-ratio

@mixin responsive-ratio($ratio, $content-class-name, $num-returns-common-ratio) { ... }

Description

Creates a scalable element that maintains a given ratio.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ratio`	A ratio value that can be expressed one of three ways: by a two number List (ex: `(16 9)` for a 16:9 ratio), by a String containing two numbers separated by either a colon, slash, comma or space (ex: `'21:9'`, `'21/9',`'21,9'`, etc), or by single number (ex:`0.75` for a 3:4 ratio).	`List` or `String` or `Number`	— none
`$content-class-name`	The optional class name, passed as a string, of the content which is being kept at the given ratio. If no class is passed, it in	`String`	— none
`$num-returns-common-ratio`	If this is set to any value except `null` or `false`, when $ratio is provided as a single Number the function will try to look for a common media ratio that is close to the provided number, on which to base the returned percentage.	`Bool`	— none

Example

.element {
  @include responsive-ratio(16 9, 'responsive-item');
}

Output

The properties on the root element, pseudo-element, and child element necessary to create a responsive and scalable element that maintains a given ratio. Uses the pattern involving padding-top on a ::before pseudo-element.

Throws

Invalid $ratio input of #{meta.inspect($ratio)} passed to the
Invalid input for $child-content-class-name in the

Requires

[mixin] _responsive-element-styles
[mixin] _responsive-element-styles
[function] equals-true
[function] is-bool
[function] is-percentage
[function] is-string
[function] is-true
[function] ratio-to-percentage

responsive-square

@mixin responsive-square($size, $min: $size, $max: $size) { ... }

Description

Creates a square with relative, dynamically sized dimensions that are clamped by provided minimum and maximum sizes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The size of the square given in relative units.	`Number`	— none
`$min`	The minimum size of the square.	`Number`	`$size`
`$max`	The maximum size of the square.	`Number`	`$size`

scrollbar

@mixin scrollbar($size, $fg-color, $bg-color: mix($fg-color, #000, 50%), $radius: null, $is-internal: false) { ... }

Description

Applies a fast custom scrollbar to the page, or to an internal element within the page. The effect works the best in webkit based browsers (Chrome, Safari, Opera, etc.), but it will apply the custom foreground and background color to the scrollbar in IE 6+, and in Firefox 64+ it will apply the background and foreground colors and can reduce the size of the bar.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The height and width of the custom scrollbar in pixels. If $size is `0`, no scrollbar will be shown.	`Number`	— none
`$fg-color`	The color of the foreground or 'handle' of the scrollbar.	`Color`	— none
`$bg-color`	The color of the background of the scrollbar.	`Color`	`mix($fg-color, #000, 50%)`
`$radius`	The optional border radius value of the scrollbar.	`Number`	`null`
`$is-internal`	Pass a true value if the scrollbar is inside of an element rather than being applied outside of any selector, which is the recommended way of applying this mixin to the browser window's scrollbar.	`Bool`	`false`

Throws

Invalid input for $size in the [ scrollbar() ] mixin. Value must

size

@mixin size($width, $height: $width) { ... }

Description

Helper utility to set both height and weight. Pass a single value to set both height and width to the same value. Unitless values are assumed to be in rems.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	A length dimension (ex. 20rem or 300px or 10%). Passing 'max' is equivalent to passing 100%.	`Length-percentage` or `String`	— none
`$height`	A length dimension. If no value is entered $height is set equal to $width.	`Number`	`$width`

smooth-retina-fonts

@mixin smooth-retina-fonts($ratio: 2) { ... }

Description

Force grayscale and anti-aliased font-smoothing on Retina and other HiDPI screens.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ratio`	The pixel ratio used to target Retina and other HiDPI screens.	`Number`	`2`

sticky

@mixin sticky($z-index, $top, $left) { ... }

Description

Helper mixin to for the associated styles with position: sticky;

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$z-index`	The z-index property value.	`Number`	— none
`$top`	The top property value.	`Number`	— none
`$left`	The left property value.	`Number`	— none

text-emboss

@mixin text-emboss($opacity, $-, $blue: null) { ... }

Description

Apply a subtle embossing text shadow effect.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$opacity`	The opacity value. Should be a unitless number between 0 and 1.	`Number`	— none
`$-`	The embossing shadow's color value. Can be and color type, but if the color has an alpha/opacity value other than 1 it will be disregarded in favor of the $opacity parameter.	`Color} $color [#fff`	— none
`$blue`	The optional blur value for the text-shadow sproperty. If not specified, it defaults to 0. If specified, it should be a length value.	`Number`	`null`

Throws

Invalid $color value passed to the [ text-emboss() ] mixin.

Requires

[function] is-color
[function] conv-color

text-hide

@mixin text-hide() { ... }

Description

Help replace an element's text content with an image (Such as in a nav brand image link). Maintain the accessibility and SEO benefits of heading tags, while utilizing an image instead of text.

Parameters

None.

text-outline

@mixin text-outline($-, $is-important) { ... }

Description

Adds a colored text outline to a font.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$-`	The outline color for the font.	`Color} $color [hsl(0 0% 39.2%)`	— none
`$is-important`	Mark the effect as important. This should be avoided whenever possible.	`Bool` or `String`	— none

Requires

[function] is-falsey

text-shadow

@mixin text-shadow($x-offset: 2px, $y-offset: 2px, $blur: 5px, $color: hsl(0, 0%, 0%, 0.4)) { ... }

Description

Apply a text shadow effect.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$x-offset`	The x-axis offset of the shadow. Must be a length or a unitless number (will be converted to a px value).	`Number`	`2px`
`$y-offset`	The x-axis offset of the shadow. Must be a length or a unitless number (will be converted to a px value).	`Number`	`2px`
`$blur`	The blur-radius of the shadow. Must be a length or a unitless number (will be converted to a px value).	`Number`	`5px`
`$color`	The color of the shadow.	`Color`	`hsl(0, 0%, 0%, 0.4)`

Throws

Invalid input for the [ text-shadow() ] mixin. All parameters

Requires

[function] is-calculation
[function] is-number

transition-color

Since 0.8.0

@mixin transition-color($text-color, $text-transition-color, $border-color, $border-width: 3px, $bg-color: rgba(0, 0, 0, 0), $bg-transition-color: $border-color, $transition-duration: 0.3s, $transition-timing) { ... }

Description

This is a mixin that will set up everything you need for a high performance background, color, and border-color animation. Since background and border-color are both considered low performance animations, this mixin emulates the effect using the ::after pseudo-element and an opacity transition.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$text-color`	The text's initial color.	`Color`	— none
`$text-transition-color`	The text color after being transitioned.	`Color`	— none
`$border-color`	The border-color for the element.	`Color`	— none
`$border-width`	The border-width for the element.	`Number`	`3px`
`$bg-color`	The element's initial background color.	`Color`	`rgba(0, 0, 0, 0)`
`$bg-transition-color`	The element's background color after being transitioned.	`Color`	`$border-color`
`$transition-duration`	The transition duration.	`Number`	`0.3s`
`$transition-timing`	The transition-timing-function value.	`String`	— none

Used by

[mixin] ghost-button

truncate

@mixin truncate($max-width: 100%, $text-overflow: ellipsis) { ... }

Description

Truncates a field or line of text on the inline progression direction, adding the text-overflow value at the end. Uses ellipsis by default.

If you would like to truncate multiple lines of text, such a text overflowing at the bottom of a box, try the clamp-lines() function instead.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$max-width`	The max width for the element.	`Number`	`100%`
`$text-overflow`	The text-overflow value.	`String`	`ellipsis`

visible

@mixin visible($visibility: false) { ... }

Description

Hide an element visually, while maintaining it for screen readers, or reverse the effects and make an element visible again.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$visibility`	Either make an element visible (`true`, `visible`, or `vis`), or make it invisible (`false`, `null`, `hidden`, `hide`, or `hid`). It can also have a value of `collapse` (or `col`) and any CSS global value.	`Bool` or `String`	`false`

Throws

Invalid value for $visibility of #{meta.inspect($visibility)}

Requires

[function] is-global-value

when-inside

Since 0.17.0

@mixin when-inside($context) { ... }

Description

Make a context-based selector.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$context`	— none	`String`	— none

Example

h1 {
  font-size : 2.5rem;

  @include when-inside(article) {
    font-size: 2rem;
  }
}

h1 { font-size: 2.5rem; }
article h1 { font-size: 2rem; }

variables

white

$white: #fff !default;

Description

White to black grayscale color spectrum, gray-1 (the lightest) through gray-10 (the darkest).

Type

Color

grayscale-map

$grayscale-map: (
  0: $white,
  1: $gray-1,
  2: $gray-2,
  3: $gray-3,
  4: $gray-4,
  5: $gray-5,
  6: $gray-6,
  7: $gray-7,
  8: $gray-8,
  9: $gray-9,
  10: $gray-10,
  11: $black
) !default;

Description

A map containing all the grayscale colors, with values from 0 (white) to 11 (black) with 1-10 being gray-1 through gray-10.

Type

Map

black-purple

$black-purple: hsl(300, 20%, 3.4%) !default;

Description

Black with just a bit of purple in it

Type

Color

color-primary

$color-primary: hsl(203.84, 92%, 30.2%) !default;

Description

The primary color, typically used for the majority of the colors in your theme.

Type

Color

color-secondary

$color-secondary: hsl(0, 0%, 46.27%) !default;

Description

The secondary color, used for secondary actions or to complement the primary color.

Type

Color

color-success

$color-success: hsl(142.36, 69.1%, 54.31%) !default;

Description

The success color, used to indicate successful actions or positive outcomes.

Type

Color

color-info

$color-info: hsl(188.2, 77.78%, 40.59%) !default;

Description

The info color, used to draw atention to important information

Type

Color

color-warning

$color-warning: hsl(44, 100%, 50%) !default;

Description

The warning color, used to indicate caution or potential issues.

Type

Color

color-alert

$color-alert: hsl(0, 100%, 50%) !default;

Description

The alert color, used to indicate errors or critical issues.

Type

Color

Used by

[mixin] debug

indicator-colors

$indicator-colors: (
  success: $color-success,
  info: $color-info,
  warning: $color-warning,
  alert: $color-alert
) !default;

Description

A map containting all the indicator colors.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`'success'`	Used to indicate successful actions or positive outcomes.	`String`	`$color-success`
`'info'`	Used to draw atention to important information.	`String`	`$color-info`
`'warning'`	Used to indicate caution or potential issues.	`String`	`$color-warning`
`'alert'`	Used to indicate errors or critical issues.	`String`	`$color-alert`

Used by

[mixin] debug

color-light

$color-light: $gray-1 !default;

Description

When you want an off-white color

Type

Color

color-dark

$color-dark: $gray-9 !default;

Description

When you want an off-black color

Type

Color

color-body-light

$color-body-light: $gray-9 !default;

Description

Default text color for the page

Type

Color

color-body-bg-light

$color-body-bg-light: $white !default;

Description

Default light-mode background color for the page

Type

Color

color-body-bg-gradient-light

$color-body-bg-gradient-light: linear-gradient(135deg, $color-body-bg-light, $gray-1) !default;

Description

Default light-mode background gradient for the page

Type

Color

color-body-dark

$color-body-dark: $white !default;

Description

Default dark-mode text color for the page

Type

Color

color-body-bg-dark

$color-body-bg-dark: $gray-10 !default;

Description

Default dark-mode background color for the page

Type

Color

color-body-bg-gradient-dark

$color-body-bg-gradient-dark: linear-gradient(135deg, $color-body-bg-dark, $black-purple) !default;

Description

Default dark-mode background gradient for the page

Type

Color

color-link

$color-link: $color-primary !default;

Description

The color of all the <a> links

Type

Color

color-selection-highlight

$color-selection-highlight: $color-primary !default;

Description

Highlight background color when text is selected.

Type

Color

color-selection-text

$color-selection-text: $white !default;

Description

Text color when it is selected.

Type

Color

color-focus-ring

$color-focus-ring: $black !default;

Description

The color of the ring around elements when they are keyboard focused.

Type

Color

contrast-text-dark

$contrast-text-dark: $gray-9 !default;

Description

The dark color for use in the color-text-contrast() function.

Type

Color

Used by

[function] color-text-contrast

contrast-text-light

$contrast-text-light: $white !default;

Description

The light color for use in the color-text-contrast() function.

Type

Color

Used by

[function] color-text-contrast

font-stacks

$font-stacks: (
  'primary': (
    Roboto,
    system-ui,
    Ubuntu,
    Cantarell,
    Arial,
    'Noto Sans',
    'Segoe UI',
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ),
  'header': (
    Lato,
    Oxygen,
    'Open Sans',
    Montserrat,
    'PT Sans',
    Verdana,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol'
  ),
  'system': (
    // Newer browsers
    system-ui,
    // Safari for OS X and iOS (San Francisco)
    -apple-system,
    // Chrome < 56 for OS X (San Francisco)
    BlinkMacSystemFont,
    // Windows
    'Segoe UI',
    // Android
    Roboto,
    // Basic web fallback
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif,
    // Emoji fonts
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ),
  'monospace': (
    // Modern pan-device default
    ui-monospace,
    // macOS 10.10+
    Menlo,
    // macOS fallback
    Monaco,
    // Windows 6+
    Consolas,
    // Android 4+
    'Roboto Mono',
    // Ubuntu 10.10+
    'Ubuntu Monospace',
    // KDE Plasma 5+
    'Noto Mono',
    // KDE Plasma 4+
    'Oxygen Mono',
    // Linux/OpenOffice fallback
    'Liberation Mono',
    // Default fallback
    monospace,
    // Emoji fonts - Apple, Windows, Linux
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ),
  'helvetica': (
    Helvetica,
    'Helvetica Neue',
    'Helvetica-Neue',
    HelveticaNeue,
    Arial,
    'Nimbus Sans L',
    sans-serif
  ),
  'lucida-grande': (
    'Lucida Grande',
    'Lucida Sans Unicode',
    'Bitstream Vera Sans',
    sans-serif
  ),
  'verdana': (
    Verdana,
    Geneva,
    'DejaVu Sans',
    sans-serif
  ),
   'georgia': (
    Georgia,
    'URW Bookman L',
    serif
  )
);

Description

A map of font stacks with web-safe fonts. Use with the font-stack function.

This map contains a collection of font stacks that can be used throughout your project. Each key in the map represents a specific use case for the font stack, such as primary, header, monospace, etc. The value associated with each key is a list of font families, ordered by preference.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`primary`	The primary font stack for body text.	`List`	— none
`header`	The font stack for headers.	`List`	— none
`system`	The font stack for system UI fonts.	`List`	— none
`monospace`	The font stack for monospace fonts.	`List`	— none
`helvetica`	The font stack for Helvetica-style sans-serif fonts.	`List`	— none
`lucida-grande`	The font stack for Lucida Grande-style sans-serif fonts.	`List`	— none
`verdana`	The font stack for Verdana-style sans-serif fonts.	`List`	— none
`georgia`	The font stack for Georgia-style serif fonts.	`List`	— none

See

[function] font-stack

TODO's

Fill out the stack with the fonts you choose for your theme

map-timing-functions

$map-timing-functions: (
  'ease-in-quad': cubic-bezier(0.55, 0.085, 0.68, 0.53),
  'ease-in-cubic': cubic-bezier(0.55, 0.055, 0.675, 0.19),
  'ease-in-quart': cubic-bezier(0.895, 0.03, 0.685, 0.22),
  'ease-in-quint': cubic-bezier(0.755, 0.05, 0.855, 0.06),
  'ease-in-sine': cubic-bezier(0.47, 0, 0.745, 0.715),
  'ease-in-expo': cubic-bezier(0.95, 0.05, 0.795, 0.035),
  'ease-in-circ': cubic-bezier(0.6, 0.04, 0.98, 0.335),
  'ease-in-back': cubic-bezier(0.6, -0.28, 0.735, 0.045),
  'ease-out-quad': cubic-bezier(0.25, 0.46, 0.45, 0.94),
  'ease-out-cubic': cubic-bezier(0.215, 0.61, 0.355, 1),
  'ease-out-quart': cubic-bezier(0.165, 0.84, 0.44, 1),
  'ease-out-quint': cubic-bezier(0.23, 1, 0.32, 1),
  'ease-out-sine': cubic-bezier(0.39, 0.575, 0.565, 1),
  'ease-out-expo': cubic-bezier(0.19, 1, 0.22, 1),
  'ease-out-circ': cubic-bezier(0.075, 0.82, 0.165, 1),
  'ease-out-back': cubic-bezier(0.175, 0.885, 0.32, 1.275),
  'ease-in-out-quad': cubic-bezier(0.455, 0.03, 0.515, 0.955),
  'ease-in-out-cubic': cubic-bezier(0.645, 0.045, 0.355, 1),
  'ease-in-out-quart': cubic-bezier(0.77, 0, 0.175, 1),
  'ease-in-out-quint': cubic-bezier(0.86, 0, 0.07, 1),
  'ease-in-out-sine': cubic-bezier(0.445, 0.05, 0.55, 0.95),
  'ease-in-out-expo': cubic-bezier(1, 0, 0, 1),
  'ease-in-out-circ': cubic-bezier(0.785, 0.135, 0.15, 0.86),
  'ease-in-out-back': cubic-bezier(0.68, -0.55, 0.265, 1.55)
);

Description

Map of custom timing functions based on Penner equations. Used by the timing function.

Each of the map's key's is a string value that has a cubic-bezier timing function curve as its value.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`ease-in-quad`	— none	`String`	— none
`ease-in-cubic`	— none	`String`	— none
`ease-in-quart`	— none	`String`	— none
`ease-in-quint`	— none	`String`	— none
`ease-in-sine`	— none	`String`	— none
`ease-in-expo`	— none	`String`	— none
`ease-in-circ`	— none	`String`	— none
`ease-in-back`	— none	`String`	— none
`ease-out-quad`	— none	`String`	— none
`ease-out-cubic`	— none	`String`	— none
`ease-out-quart`	— none	`String`	— none
`ease-out-quint`	— none	`String`	— none
`ease-out-sine`	— none	`String`	— none
`ease-out-expo`	— none	`String`	— none
`ease-out-circ`	— none	`String`	— none
`ease-out-back`	— none	`String`	— none
`ease-in-out-quad`	— none	`String`	— none
`ease-in-out-cubic`	— none	`String`	— none
`ease-in-out-quart`	— none	`String`	— none
`ease-in-out-quint`	— none	`String`	— none
`ease-in-out-sine`	— none	`String`	— none
`ease-in-out-expo`	— none	`String`	— none
`ease-in-out-circ`	— none	`String`	— none
`ease-in-out-back`	— none	`String`	— none

Used by

[function] timing

See

[function] timing

map-directions

$map-directions: (
  0: (
    'name': 'top',
    'deg': 0
  ),
  45: (
    'name': 'top right',
    'deg': 45
  ),
  90: (
    'name': 'right',
    'deg': 90
  ),
  135: (
    'name': 'bottom right',
    'deg': 135
  ),
  180: (
    'name': 'bottom',
    'deg': 180
  ),
  225: (
    'name': 'bottom left',
    'deg': 225
  ),
  270: (
    'name': 'left',
    'deg': 270
  ),
  315: (
    'name': 'top left',
    'deg': 315
  ),
  360: (
    'name': 'top',
    'deg': 0
  )
);

Description

A comprehensive map associating all the direction/offset keywords with their associated angles in degrees.

This map provides a detailed reference for various direction/offset keyword, (such as those used in the CSS property transform-origin) each represented by an angle in degrees. Each key in the map is a unitless number, which represents an angle in degrees, and the value is a nested map containing the 'name' of the direction/offset and its 'deg' angle, also as a unitless number.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`0`	The 'name' key with value of 'top' and a 'deg' key with value of 0	`Map`	— none
`45`	The 'name' key with value of 'top right' and a 'deg' key with value of 45	`Map`	— none
`90`	The 'name' key with value of 'right' and a 'deg' key with value of 90	`Map`	— none
`135`	The 'name' key with value of 'bottom right' and a 'deg' key with value of 135	`Map`	— none
`180`	The 'name' key with value of 'bottom' and a 'deg' key with value of 180	`Map`	— none
`225`	The 'name' key with value of 'bottom left' and a 'deg' key with value of 225	`Map`	— none
`270`	The 'name' key with value of 'left' and a 'deg' key with value of 270	`Map`	— none
`315`	The 'name' key with value of 'top left' and a 'deg' key with value of 315	`Map`	— none
`360`	The 'name' key with value of 'top' and a 'deg' key with value of 360 effectively wrapping around to the start.	`Map`	— none

Used by

[function] closest-direction

See

[function] closest-direction

map-positions

$map-positions: (
  0: (
    'name': 'top',
    'deg': 0
  ),
  90: (
    'name': 'right',
    'deg': 90
  ),
  180: (
    'name': 'bottom',
    'deg': 180
  ),
  270: (
    'name': 'left',
    'deg': 270
  ),
  360: (
    'name': 'top',
    'deg': 0
  )
);

Description

Map of only the position/offset keywords and their associated angles, in degrees.

This map is designed to provide a simple way to reference position/offsets (top, right, bottom, left) and their associated angles in degrees. Each key in the map represents an angle in degrees, and the value is a map containing the 'name' of the position and its 'deg' angle. This can be particularly useful for calculations or when you need to reference positions in a more dynamic way.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`0`	The position name 'top' with an angle of 0 degrees.	`Map`	— none
`90`	The position name 'right' with an angle of 90 degrees.	`Map`	— none
`180`	The position name 'bottom' with an angle of 180 degrees.	`Map`	— none
`270`	The position name 'left' with an angle of 270 degrees.	`Map`	— none
`360`	The position name 'top' with an angle of 360 degrees, effectively wrapping around to the start.	`Map`	— none

Used by

[function] closest-position

See

[function] closest-position

map-units

$map-units: (
  'px': 1px,
  'cm': 1cm,
  'mm': 1mm,
  '%': 1%,
  'ch': 1ch,
  'pc': 1pc,
  'in': 1in,
  'em': 1em,
  'rem': 1rem,
  'pt': 1pt,
  'ex': 1ex,
  'vw': 1vw,
  'vh': 1vh,
  'vmin': 1vmin,
  'vmax': 1vmax,
  'svw': 1svw,
  'svh': 1svh,
  'svmin': 1svmin,
  'svmax': 1svmax,
  'lvw': 1lvw,
  'lvh': 1lvh,
  'lvmin': 1lvmin,
  'lvmax': 1lvmax,
  'dvw': 1dvw,
  'dvh': 1dvh,
  'dvmin': 1dvmin,
  'dvmax': 1dvmax,
  'lh': 1lh,
  'rlh': 1rlh,
  'vb': 1vb,
  'vi': 1vi,
  'svb': 1svb,
  'svi': 1svi,
  'lvb': 1lvb,
  'lvi': 1lvi,
  'dvb': 1dvb,
  'dvi': 1dvi,
  'cap': 1cap,
  'rcap': 1rcap,
  'fr': 1fr,
  'ic': 1ic,
  'ric': 1ric,
  'cqw': 1cqw,
  'cqh': 1cqh,
  'cqi': 1cqi,
  'cqb': 1cqb,
  'cqmin': 1cqmin,
  'cqmax': 1cqmax,
  'gd': 1gd,
  'dppx': 1dppx,
  'dpcm': 1dpcm,
  'dpi': 1dpi,
  'Q': 1Q,
  'x': 1x,
  'deg': 1deg,
  'rad': 1rad,
  'grad': 1grad,
  'turn': 1turn,
  'Hz': 1Hz,
  'kHz': 1kHz
);

Description

A map of all the units in CSS as string types for keys, with their values being 1 numeric unit.

Type

Map

Used by

[function] _to-unit

See

[function] str-to-num
[function] _to-unit

list-units

$list-units: map.keys($map-units);

Description

A list of all the units in CSS as string types

Type

Map

list-unit-values

$list-unit-values: map.values($map-units);

Description

A list of all the units in CSS as a single numeric unit (such a 1rem, 1px, etc...)

Type

List

map-color-names

$map-color-names: (
  aliceblue: #f0f8ff,
  antiquewhite: #faebd7,
  aqua: #0ff,
  aquamarine: #7fffd4,
  azure: #f0ffff,
  beige: #f5f5dc,
  bisque: #ffe4c4,
  black: #000,
  blanchedalmond: #ffebcd,
  blue: #00f,
  blueviolet: #8a2be2,
  brown: #a52a2a,
  burlywood: #deb887,
  cadetblue: #5f9ea0,
  chartreuse: #7fff00,
  chocolate: #d2691e,
  coral: #ff7f50,
  cornflowerblue: #6495ed,
  cornsilk: #fff8dc,
  crimson: #dc143c,
  darkblue: #00008b,
  darkcyan: #008b8b,
  darkgoldenrod: #b8860b,
  darkgray: #a9a9a9,
  darkgreen: #006400,
  darkkhaki: #bdb76b,
  darkmagenta: #8b008b,
  darkolivegreen: #556b2f,
  darkorange: #ff8c00,
  darkorchid: #9932cc,
  darkred: #8b0000,
  darksalmon: #e9967a,
  darkseagreen: #8fbc8f,
  darkslateblue: #483d8b,
  darkslategray: #2f4f4f,
  darkturquoise: #00ced1,
  darkviolet: #9400d3,
  deeppink: #ff1493,
  deepskyblue: #00bfff,
  dimgray: #696969,
  dodgerblue: #1e90ff,
  firebrick: #b22222,
  floralwhite: #fffaf0,
  forestgreen: #228b22,
  fuchsia: #f0f,
  gainsboro: #dcdcdc,
  ghostwhite: #f8f8ff,
  gold: #ffd700,
  goldenrod: #daa520,
  gray: #808080,
  green: #008000,
  greenyellow: #adff2f,
  honeydew: #f0fff0,
  hotpink: #ff69b4,
  indianred: #cd5c5c,
  indigo: #4b0082,
  ivory: #fffff0,
  khaki: #f0e68c,
  lavender: #e6e6fa,
  lavenderblush: #fff0f5,
  lawngreen: #7cfc00,
  lemonchiffon: #fffacd,
  lightblue: #add8e6,
  lightcoral: #f08080,
  lightcyan: #e0ffff,
  lightgoldenrodyellow: #fafad2,
  lightgray: #d3d3d3,
  lightgreen: #90ee90,
  lightpink: #ffb6c1,
  lightsalmon: #ffa07a,
  lightseagreen: #20b2aa,
  lightskyblue: #87cefa,
  lightslategray: #789,
  lightsteelblue: #b0c4de,
  lightyellow: #ffffe0,
  lime: #0f0,
  limegreen: #32cd32,
  linen: #faf0e6,
  maroon: #800000,
  mediumaquamarine: #66cdaa,
  mediumblue: #0000cd,
  mediumorchid: #ba55d3,
  mediumpurple: #9370db,
  mediumseagreen: #3cb371,
  mediumslateblue: #7b68ee,
  mediumspringgreen: #00fa9a,
  mediumturquoise: #48d1cc,
  mediumvioletred: #c71585,
  midnightblue: #191970,
  mintcream: #f5fffa,
  mistyrose: #ffe4e1,
  moccasin: #ffe4b5,
  navajowhite: #ffdead,
  navy: #000080,
  oldlace: #fdf5e6,
  olive: #808000,
  olivedrab: #6b8e23,
  orange: #ffa500,
  orangered: #ff4500,
  orchid: #da70d6,
  palegoldenrod: #eee8aa,
  palegreen: #98fb98,
  paleturquoise: #afeeee,
  palevioletred: #db7093,
  papayawhip: #ffefd5,
  peachpuff: #ffdab9,
  peru: #cd853f,
  pink: #ffc0cb,
  plum: #dda0dd,
  powderblue: #b0e0e6,
  purple: #800080,
  rebeccapurple: #639,
  red: #f00,
  rosybrown: #bc8f8f,
  royalblue: #4169e1,
  saddlebrown: #8b4513,
  salmon: #fa8072,
  sandybrown: #f4a460,
  seagreen: #2e8b57,
  seashell: #fff5ee,
  sienna: #a0522d,
  silver: #c0c0c0,
  skyblue: #87ceeb,
  slateblue: #6a5acd,
  slategray: #708090,
  snow: #fffafa,
  springgreen: #00ff7f,
  steelblue: #4682b4,
  tan: #d2b48c,
  teal: #008080,
  thistle: #d8bfd8,
  tomato: #ff6347,
  transparent: #0000,
  turquoise: #40e0d0,
  violet: #ee82ee,
  wheat: #f5deb3,
  white: #fff,
  whitesmoke: #f5f5f5,
  yellow: #ff0,
  yellowgreen: #9acd32
);

Description

Map of all the CSS color names and their hex values. Can use to convert CSS color names into their hex value when Sass color module functions return them as their color name.

Every key of the map is a CSS color name of type 'color', not 'string'. Every associated value is the 3 or 6 digit hex color value for that name, with the exception of the value transparent, which has an associated 4 digit hex color of #0000.

Type

Map

Used by

[function] conv-color-name

See

[function] conv-color-name

map-color-name-strings

$map-color-name-strings: stringify-map-keys($map-color-names);

Description

Map of all the CSS color names as strings and their hex values.

Every key of the map is a CSS color name of type 'string'. Every associated value is the 3 or 6 digit hex color value for that name, with the exception of the value transparent, which has an associated 4 digit hex color of #0000.

Type

Map

map-duplicate-color-names

$map-duplicate-color-names: (
  cyan: #0ff, // duplicate of aqua
  magenta: #f0f, // duplicate of fuchsia
  darkgrey: #a9a9a9, // duplicate of darkgray
  darkslategrey: #2f4f4f, // duplicate of darkslategray
  dimgrey: #696969, // duplicate of dimgray
  grey: #808080, // duplicate of gray
  lightgrey: #d3d3d3, // duplicate of lightgray
  lightslategrey: #789, // duplicate of lightslategray
  slategrey: #708090 // duplicate of slategray
);

Description

Map of all the CSS color names and their hex values which were not included in $map-color-names due to being duplicates of other values.

Type

Map

list-color-names

$list-color-names: (
  aliceblue,
  antiquewhite,
  aqua,
  aquamarine,
  azure,
  beige,
  bisque,
  black,
  blanchedalmond,
  blue,
  blueviolet,
  brown,
  burlywood,
  cadetblue,
  chartreuse,
  chocolate,
  coral,
  cornflowerblue,
  cornsilk,
  crimson,
  cyan,
  darkblue,
  darkcyan,
  darkgoldenrod,
  darkgray,
  darkgreen,
  darkgrey,
  darkkhaki,
  darkmagenta,
  darkolivegreen,
  darkorange,
  darkorchid,
  darkred,
  darksalmon,
  darkseagreen,
  darkslateblue,
  darkslategray,
  darkslategrey,
  darkturquoise,
  darkviolet,
  deeppink,
  deepskyblue,
  dimgray,
  dimgrey,
  dodgerblue,
  firebrick,
  floralwhite,
  forestgreen,
  fuchsia,
  gainsboro,
  ghostwhite,
  gold,
  goldenrod,
  gray,
  green,
  greenyellow,
  grey,
  honeydew,
  hotpink,
  indianred,
  indigo,
  ivory,
  khaki,
  lavender,
  lavenderblush,
  lawngreen,
  lemonchiffon,
  lightblue,
  lightcoral,
  lightcyan,
  lightgoldenrodyellow,
  lightgray,
  lightgreen,
  lightgrey,
  lightpink,
  lightsalmon,
  lightseagreen,
  lightskyblue,
  lightslategray,
  lightslategrey,
  lightsteelblue,
  lightyellow,
  lime,
  limegreen,
  linen,
  magenta,
  maroon,
  mediumaquamarine,
  mediumblue,
  mediumorchid,
  mediumpurple,
  mediumseagreen,
  mediumslateblue,
  mediumspringgreen,
  mediumturquoise,
  mediumvioletred,
  midnightblue,
  mintcream,
  mistyrose,
  moccasin,
  navajowhite,
  navy,
  oldlace,
  olive,
  olivedrab,
  orange,
  orangered,
  orchid,
  palegoldenrod,
  palegreen,
  paleturquoise,
  palevioletred,
  papayawhip,
  peachpuff,
  peru,
  pink,
  plum,
  powderblue,
  purple,
  rebeccapurple,
  red,
  rosybrown,
  royalblue,
  saddlebrown,
  salmon,
  sandybrown,
  seagreen,
  seashell,
  sienna,
  silver,
  skyblue,
  slateblue,
  slategray,
  slategrey,
  snow,
  springgreen,
  steelblue,
  tan,
  teal,
  thistle,
  tomato,
  transparent,
  turquoise,
  violet,
  wheat,
  white,
  whitesmoke,
  yellow,
  yellowgreen
);

Description

A List of all the CSS color names, including those with duplicate hex values such as gray and grey or aqua and cyan.

Type

List

list-named-hex-colors

$list-named-hex-colors: map.values($map-color-names);

Description

A list containing all hex values which have a corresponding CSS color name keyword.

Type

List

global-values

$global-values: (inherit initial revert revert-layer unset);

Description

A list containing all the available CSS global values that can be used with virtually any property.

Type

List

Used by

[function] is-global-value

map-decimals

$map-decimals: (
  '0': 0,
  '1': 1,
  '2': 2,
  '3': 3,
  '4': 4,
  '5': 5,
  '6': 6,
  '7': 7,
  '8': 8,
  '9': 9
);

Description

A map with stringified decimal values 0 - 9 as keys and their Number type equivalent as values.

Type

Map

Used by

[function] str-to-num

decimal-space

$decimal-space: map.values($map-decimals);

Description

A list containing all potential decimal values 0 - 9.

Type

List

Used by

[function] is-conventional

hex-space

$hex-space: ('0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'A' 'B' 'C' 'D' 'E' 'F');

Description

A list containing all potential hexadecimal values 0 - F.

Type

List

sort-order

$sort-order: (
  '!', '#', '$', '%', '&', '\'', '(' ')', '*', '+', ',', '-',
  '.', '/', '[', '\\', ']', '^', '_', '{', '|', '}', '~', '0',
  '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c',
  'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o',
  'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
);

Description

The alphabetical order of characters.

Type

List

Used by

[function] list-sort

See

[function] list-sort

map-alias-resolutions

$map-alias-resolutions: (
  'bottom': (
    'bottom',
    'btm',
    'b',
    'down',
    'd'
  ),
  'top': (
    'top',
    'up',
    'u',
    't',
    '^'
  ),
  'left': (
    'left-side',
    'left side',
    'leftside',
    'l-side',
    'l side',
    'lside',
    'left',
    '<-',
    '<',
    'l'
  ),
  'right': (
    'right-side',
    'right side',
    'rightside',
    'r-side',
    'r side',
    'rside',
    'right',
    '->',
    '>',
    'r'
  ),
  'top left': (
    'top-left',
    'top left',
    'topleft',
    'left-top',
    'left top',
    'lefttop',
    'up-left',
    'up left',
    'upleft',
    'left-up',
    'left up',
    'leftup',
    'top-l',
    'top l',
    'topl',
    'l-top',
    'l top',
    'ltop',
    'up-l',
    'up l',
    'upl',
    'l-up',
    'l up',
    'lup',
    't-l',
    't l',
    'tl',
    'l-t',
    'l t',
    'lt',
    'u-l',
    'u l',
    'ul',
    'l-u',
    'l u',
    'lu',
    '^ <-',
    '<- ^',
    '^<-',
    '<-^',
    '^ <',
    '< ^',
    '^<',
    '<^'
  ),
  'top right': (
    'top-right',
    'top right',
    'topright',
    'right-top',
    'right top',
    'righttop',
    'up-right',
    'up right',
    'upright',
    'right-up',
    'right up',
    'rightup',
    'top-r',
    'top r',
    'r-top',
    'r top',
    'up-r',
    'up r',
    'r-up',
    'r up',
    't-r',
    'r-t',
    't r',
    'r t',
    'tr',
    'rt',
    'u-r',
    'r-u',
    'u r',
    'r u',
    'ur',
    'ru',
    '^ ->',
    '-> ^',
    '^->',
    '->^',
    '^ >',
    '> ^',
    '^>',
    '>^'
  ),
  'bottom right': (
    'bottom-right',
    'bottom right',
    'bottomright',
    'right-bottom',
    'right bottom',
    'rightbottom',
    'down-right',
    'down right',
    'right-down',
    'right down',
    'rightdown',
    'bottom-r',
    'bottom r',
    'bottomr',
    'r-bottom',
    'r bottom',
    'rbottom',
    'down-r',
    'down r',
    'downr',
    'r-down',
    'r down',
    'rdown',
    'btm-right',
    'btm right',
    'btmright',
    'right-btm',
    'right btm',
    'rightbtm',
    'btm-r',
    'btm r',
    'btmr',
    'r-btm',
    'r btm',
    'rbtm',
    'b-right',
    'b right',
    'bright',
    'd-right',
    'd right',
    'dright',
    'right-d',
    'right d',
    'rightd',
    'd-r',
    'd r',
    'dr',
    'r-d',
    'r d',
    'rd',
    'b-r',
    'b r',
    'br',
    'r-b',
    'r b',
    'rb',
    'v ->',
    '-> v',
    'v->',
    '->v',
    'v >',
    '> v',
    'v>',
    '>v'
  ),
  'bottom left': (
    'bottom-left',
    'bottom left',
    'bottomleft',
    'left-bottom',
    'left bottom',
    'leftbottom',
    'bottom-l',
    'bottom l',
    'bottoml',
    'l-bottom',
    'l bottom',
    'lbottom',
    'btm-left',
    'btm left',
    'btmleft',
    'left-btm',
    'left btm',
    'leftbtm',
    'btm-l',
    'btm l',
    'btml',
    'l-btm',
    'l btm',
    'lbtm',
    'b-left',
    'b left',
    'bleft',
    'down-left',
    'down left',
    'downleft',
    'd-left',
    'd left',
    'dleft',
    'left-d',
    'left d',
    'leftd',
    'd-l',
    'd l',
    'dl',
    'l-d',
    'l d',
    'ld',
    'b-l',
    'b l',
    'bl',
    'l-b',
    'l b',
    'lb',
    'v <-',
    '<- v',
    'v<-',
    '<-v',
    'v <',
    '< v',
    'v<',
    '<v'
  ),
  'left-to-right': (
    'horizontally',
    'horizontal',
    'horiz',
    'horz',
    'h',
    'left-to-right',
    'left to right',
    'lefttoright',
    'left-right',
    'left right',
    'leftright',
    'to-right',
    'to right',
    'toright',
    'torght',
    'l-to-r',
    'l to r',
    'l-2-r',
    'l 2 r',
    'l2r',
    'l-r',
    'l r',
    'lr',
    '90deg',
    90deg,
    '90d',
    '90',
    90,
    '-270deg',
    -270deg,
    '-270d' -270,
    0.25turn,
    '0.25turn',
    '.25turn',
    0.25,
    0.25t,
    '0.25t',
    '.25t',
    -0.75,
    -0.75turn,
    '-0.75',
    '-0.75turn',
    '-0.75t'
  ),
  'right-to-left': (
    'right-to-left',
    'right to left',
    'righttoleft',
    'right-left',
    'right left',
    'rightleft',
    'to left',
    'to-left',
    'toleft',
    'r to l',
    'r-to-l',
    'r-2-l',
    'r 2 l',
    'r2l',
    'r-l',
    'r l',
    'rl',
    270,
    270deg,
    270d,
    '270',
    '270deg',
    '270d',
    -90,
    -90deg,
    '-90',
    '-90deg',
    '-90d',
    -90d,
    0.75,
    0.75t,
    '0.75turn',
    '.75turn',
    '0.75t',
    '.75t',
    -0.25,
    -0.25turn,
    '-0.25turn',
    '-.25turn',
    '-0.25t',
    '-.25t'
  ),
  'top-to-bottom': (
    'vertically',
    'vertical',
    'vert',
    'v',
    'top-to-bottom',
    'top to bottom',
    'toptobottom',
    'top-bottom',
    'top bottom',
    'topbottom',
    'top-to-btm',
    'top to btm',
    'toptobtm',
    'top-2-bottom',
    'top-2-btm',
    'top-btm',
    'top btm',
    'topbtm',
    'to-bottom',
    'to bottom',
    'tobottom',
    'tobtm',
    't-t-b',
    't t b',
    't-2-b',
    't 2 b',
    'ttb',
    't2b',
    'tb',
    180,
    '180',
    180deg,
    '180deg',
    '180d',
    180d,
    -180,
    '-180',
    '-180deg',
    '-180d',
    -180d,
    0.5,
    0.5t,
    0.5turn,
    '0.5turn',
    '0.5t',
    -0.5,
    -0.5turn,
    -0.5t,
    '-0.5',
    '-0.5turn',
    '-0.5t',
    3.14rad,
    '3.14rad',
    200grad,
    '200grad'
  ),
  'bottom-to-top': (
    'bottom-to-top',
    'bottom to top',
    'bottomtotop',
    'bottom-top',
    'bottom top',
    'bottomtop',
    'btm-to-top',
    'btm to top',
    'btmtotop',
    'bottom-2-top',
    'btm-2-top',
    'btm2top',
    'btm-top',
    'btm top',
    'btmtop',
    'to-top',
    'to top',
    'totop',
    'b-t-t',
    'b t t',
    'b-2-t',
    'bt 2 t',
    'btt',
    'b2t',
    'bt',
    0,
    '0',
    0deg,
    '0deg',
    '0d',
    0d,
    -360,
    '-360',
    '-360deg',
    '-360d',
    -360d,
    0t,
    0turn,
    '0turn',
    '0t',
    -1,
    -1turn,
    -1t,
    '-1',
    '-1turn',
    '-1t',
    0rad,
    '0rad',
    0grad,
    '0grad'
  ),
  'bottom-left-to-top-right': (
    'right-diagonal',
    'right diagonal',
    'rightdiagonal',
    'right-diag',
    'right diag',
    'rightdiag',
    'r-diag',
    'r diag',
    'rdiag',
    'diagonal-1',
    'diagonal 1',
    'diagonal1',
    'diagonal',
    'diag-1',
    'diag 1',
    'diag',
    'd1',
    'bottom-left-to-top-right',
    'bottom-left to top-right',
    'bottom left to top right',
    'bottom-left top-right',
    'bottom left top right',
    'to top right',
    'to-top-right',
    'totopright',
    'bl-to-tr',
    'bl to tr',
    'b-l to t-r',
    'b-l 2 t-r',
    'b-l-2-t-r',
    'bl 2 tr',
    'bl2tr',
    'b-l-t-r',
    'b-l t-r',
    'bl-tr',
    'bl tr',
    'bltr',
    45,
    45d,
    '45',
    '45deg',
    '45d',
    -315,
    -315d,
    -315deg,
    '-315',
    '-315deg',
    '-315d',
    0.125,
    0.125t,
    '0.125',
    '.125',
    '0.125t',
    '.125t',
    -0.875,
    -0.875t,
    -0.875turn,
    '-0.875',
    '-.875',
    '-0.875turn',
    '-.875turn',
    '-0.875t',
    '-.875t',
    0.7854rad,
    '0.7854rad',
    50grad,
    '50grad'
  ),
  'bottom-right-to-top-left': (
    'left-diagonal',
    'left diagonal',
    'leftdiagonal',
    'left-diag',
    'left diag',
    'leftdiag',
    'l-diag',
    'l diag',
    'ldiag',
    'diagonal-2',
    'diagonal 2',
    'diagonal2',
    'diag-2',
    'diag 2',
    'diag2',
    'd2',
    'bottom-right-to-top-left',
    'bottom-right to top-left',
    'bottom right to top left',
    'bottom-right top-left',
    'bottom right top left',
    'btm-right-to-top-left',
    'btm-right to top-left',
    'btm right to top left',
    'btm-right top-left',
    'btm right top left',
    'to top left',
    'to-top-left',
    'totopleft',
    'br-to-tl',
    'br to tl',
    'b-r to t-l',
    'b-r 2 t-l',
    'b-r-2-t-l',
    'br 2 tl',
    'br2tl',
    'b-r-t-l',
    'b-r t-l',
    'br-tl',
    'br tl',
    'brtl',
    135,
    135d,
    '135',
    '135deg',
    '135d',
    -225,
    -225d,
    -225deg,
    '-225',
    '-225deg',
    '-225d',
    0.375,
    0.375t,
    '0.375',
    '.375',
    '0.375t',
    '.375t',
    -0.625,
    -0.625t,
    -0.625turn,
    '-0.625',
    '-.625',
    '-0.625turn',
    '-.625turn',
    '-0.625t',
    '-.625t',
    2.3561rad,
    2.3562rad,
    '2.3561rad',
    '2.3562rad',
    150grad,
    '150grad'
  ),
  'top-right-to-bottom-left': (
    'diagonal-3',
    'diagonal 3',
    'diagonal3',
    'diag-3',
    'diag 3',
    'diag3',
    'd3',
    'top-right-to-bottom-left',
    'top-right to bottom-left',
    'top right to bottom left',
    'top-right bottom-left',
    'top right bottom left',
    'top-right-to-btm-left',
    'top-right to btm-left',
    'top right to btm left',
    'top-right btm-left',
    'top right btm left',
    'to botom left',
    'to-bottom-left',
    'tobottomleft',
    'tr-to-bl',
    'tr to bl',
    't-r to b-l',
    't-r 2 b-l',
    't-r-2-b-l',
    'tr 2 bl',
    'tr2bl',
    't-r-b-l',
    't-r b-l',
    'tr-bl',
    'tr bl',
    'trbl',
    225,
    225d,
    '225',
    '225deg',
    '225d',
    -135,
    -135d,
    -135deg,
    '-135',
    '-135deg',
    '-135d',
    0.625,
    0.625t,
    '0.625',
    '.625',
    '0.625t',
    '.625t',
    -0.375,
    -0.375t,
    -0.375turn,
    '-0.375',
    '-.375',
    '-0.375turn',
    '-.375turn',
    '-0.375t',
    '-.375t',
    3.927rad,
    3.9269rad,
    3.92699rad,
    '3.927rad',
    '3.9269rad',
    '3.92699rad',
    250grad,
    '250grad'
  ),
  'top-left-to-bottom-right': (
    'diagonal-4',
    'diagonal 4',
    'diagonal4',
    'diag-4',
    'diag 4',
    'diag4',
    'd4',
    'top-left-to-bottom-right',
    'top-left to bottom-right',
    'top left to bottom right',
    'top-left bottom-right',
    'top left bottom right',
    'top-left-to-btm-right',
    'top-left to btm-right',
    'top left to btm right',
    'top-left btm-right',
    'top left btm right',
    'to bottom right',
    'to-bottom-right',
    'tobottomright',
    'tobtmright',
    'tl-to-br',
    'tl to br',
    'tltobr',
    't-l to b-r',
    't-l 2 b-r',
    't-l-2-b-r',
    'tl 2 br',
    'tl2br',
    't-l-b-r',
    't-l b-r',
    'tl-br',
    'tl br',
    'tlbr',
    315,
    315d,
    '315',
    '315deg',
    '315d',
    -45,
    -45d,
    -45deg,
    '-45',
    '-45deg',
    '-45d',
    0.375,
    0.375t,
    '0.375',
    '.375',
    '0.375t',
    '.375t',
    -0.875,
    -0.875t,
    -0.875turn,
    '-0.875',
    '-.875',
    '-0.875turn',
    '-.875turn',
    '-0.875t',
    '-.875t',
    5.4978rad,
    '5.4978rad',
    350grad,
    '350grad'
  ),
  'radial': (
    'ellipse at center',
    'ellipse-at-center',
    'ellipse at centre',
    'ellipse-at-centre',
    'center-ellipse',
    'center ellipse',
    'ellipse-center',
    'ellipse center',
    'centre-ellipse',
    'centre ellipse',
    'ellipse-centre',
    'ellipse centre',
    'ellipse',
    'ellip',
    'radial',
    'rad'
  ),
  'center': (
    'center',
    'centre',
    'middle',
    'mid',
    'cent',
    'cen',
    'c'
  ),
  'forwards': (
    'forwards',
    'forward',
    'fwards',
    'fward',
    'front',
    'frnt',
    'fwd',
    'fw',
    'f'
  ),
  'backwards': (
    'backwards',
    'backward',
    'bckwrd',
    'bwards',
    'bward',
    'back',
    'bck',
    'bw'
  ),
  'expand': (
    'expand',
    'grow',
    'exp',
    'ex',
    'e'
  ),
  'contract': (
    'contract',
    'shrink',
    'cont',
    'con'
  ),
  'reverse': (
    'reverses',
    'reverse',
    'rev',
    'rvs'
  ),
  'alternate': (
    'alternates',
    'alternate',
    'alt',
    'a'
  ),
  'alternate-reverse': (
    'alternate-reverse',
    'alternate reverse',
    'alternatereverse',
    'reverse-alternate',
    'reverse alternate',
    'reversealternate',
    'alt-reverse',
    'alt reverse',
    'altreverse',
    'reverse-alt',
    'reverse alt',
    'reversealt',
    'alternate-rev',
    'alternate rev',
    'alternaterev',
    'rev-alternate',
    'rev alternate',
    'revalternate',
    'alt-rev',
    'alt rev',
    'altrev',
    'rev-alt',
    'rev alt',
    'revalt',
    'alternate-rvs',
    'alternate rvs',
    'alternatervs',
    'rvs-alternate',
    'rvs alternate',
    'rvsalternate',
    'alt-rvs',
    'alt rvs',
    'altrvs',
    'rvs-alt',
    'rvs alt',
    'rvsalt',
    'alt-r',
    'alt r',
    'altr',
    'r-alt',
    'r alt',
    'ralt',
    'a-rev',
    'a rev',
    'arev',
    'rev-a',
    'rev a',
    'reva',
    'a-rvs',
    'a rvs',
    'arvs',
    'rvs-a',
    'rvs a',
    'rvsa',
    'a-r',
    'a r',
    'ar',
    'r-a',
    'r a',
    'ra'
  ),
  'normal': (
    'default',
    'normal',
    'norm',
    'dflt',
    'nor',
    'def'
  ),
  'none': (
    'none',
    'nothing',
    'nil',
    'n/a',
    'no',
    'n'
  ),
  'background': (
    'background',
    'bground',
    'bg'
  ),
  'foreground': (
    'foreground',
    'fground',
    'fg'
  ),
  'background-color': (
    'background-color',
    'background color',
    'bground-color',
    'bground color',
    'bg-color',
    'bg color',
    'bgcolor',
    'bg-col',
    'bg col',
    'bgcol',
    'bg-c',
    'bg c',
    'bgc'
  ),
  'background-image': (
    'background-image',
    'background image',
    'background-img',
    'background img',
    'bground-image',
    'bground-img',
    'bg-image',
    'bg image',
    'bgimage',
    'bg-img',
    'bg img',
    'bgimg',
    'bg-i',
    'bg i',
    'bgi'
  ),
  'infinite': (
    'infinite',
    'inf',
  ),
  'deg': (
    'degrees',
    'degree',
    'degs',
    'deg'
  ),
  'rad': (
    'radians',
    'radian',
    'rads',
    'rad'
  ),
  'turn': (
    'turns',
    'turn',
    'trn'
  ),
  'grad': (
    'gradians',
    'gradian',
    'grads',
    'grad'
  ),
  'transparent': (
    'transparent',
    'transp',
    'trans',
    'clear',
    'tran',
    'tp'
  ),
  'row-reverse': (
    'row-reverse',
    'row reverse',
    'row-rvs',
    'row rvs',
    'row r',
    'row-r',
    'rowr',
    'r-rvs',
    'r rvs',
    'rrvs',
    'r-r',
    'r r',
    'rr'
  ),
  'column': (
    'columns',
    'column',
    'col'
  ),
  'column-reverse': (
    'column-reverse',
    'column reverse',
    'column-rvs',
    'column rvs',
    'column r',
    'column-r',
    'columnr',
    'col-reverse',
    'col reverse',
    'colreverse',
    'col-rvs',
    'col rvs',
    'colrvs',
    'col r',
    'col-r',
    'colr',
    'c-rvs',
    'c rvs',
    'crvs',
    'c-r',
    'c r',
    'cr'
  )
);

Description

Map of keywords, each with their own list of potential aliases.

Used by the is-alias and resolve-alias functions to allow a greater set of possible inputs when using functions and mixins.

Type

Map

Used by

[mixin] flip
[function] is-alias
[function] resolve-alias

See

[function] is-alias
[function] resolve-alias

base-font-size

$base-font-size: 16 !default;

Description

This is the base font size, which is used as the root for rem and em units, as well as for unit conversion. Default is 16 for 16px/100%/1em/1rem. This value is used in the conv-to-rem(), conv-to-px() and conv-to-em() functions. If you are using Betterize too, this value will be used to calculate the base font-size in em units, set on the html element.

Type

Number

Used by

[function] conv-to-em
[function] conv-to-px
[function] conv-to-px
[function] conv-to-rem
[mixin] reset-text

See

[function] conv-to-em
[function] conv-to-px
[function] conv-to-rem
[mixin] reset-text

body-font-size

$body-font-size: 1rem !default;

Description

Sets the body element's font size. Sometimes you may want to change this value to be different than the $base-font-size value.

Type

Number

asset-base-path

$asset-base-path: 'assets' !default;

Description

Base path for assets (fonts, images, etc.). Do not use a trailing slash. If you are not using an assets folder, you can set this to null or ''.

Type

String

Used by

[function] _asset

max-inline-size

$max-inline-size: 1140px !default;

Description

Container's maximum width

Type

Number

Used by

[mixin] container

image-suffix-2x

$image-suffix-2x: '@2x' !default;

Description

Suffix appended to the end of an image name to indicate that it is for HiDPI. Retina displays

Type

String

Used by

[mixin] bg-image

bem-elem-separator

$bem-elem-separator: '__' !default;

Description

Separation characters between a block and an element if using BEM notation.

Type

String

Used by

[mixin] elem

bem-mod-separator

$bem-mod-separator: '--' !default;

Description

Separation characters between a modifier and its parent if using BEM notation.

Type

String

Used by

[mixin] mod

btn-transition-properties

$btn-transition-properties: background-color, border-color, box-shadow, color,
  top !default;

Description

Button transition properties.

Type

List

btn-transition-duration

$btn-transition-duration: 0.3s !default;

Description

The duration of the transition used on buttons.

Type

Number

btn-transition-timing-function

$btn-transition-timing-function: ease-out !default;

Description

The timing function used on button transitions.

Type

String

btn-transition

$btn-transition: () !default;

Description

The value for the transition property on buttons. Created from the previous button transition properties by the @each loop following this declaration.

Type

List

text-contrast-threshold

$text-contrast-threshold: 150 !default;

Description

The lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.

Type

Number

Used by

[function] color-text-contrast

spacer

$spacer: 1rem !default;

Description

Default spacer size

Type

Number

Used by

[mixin] nav-divider