General

functions

tint

@function tint($color, $pct) { ... }

View source

Description

Lighten a color by mixing it with white

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	color to tint	`Color`	— none
`$pct`	percentage of `$color` in returned color	`Number`	— none

Returns

Color —

Lightened color

shade

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

View source

Description

Darken a color by mixing it with black

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	color to shade	`Color`	— none
`$pct`	percentage of `$color` in returned color	`Number`	— none

Returns

Color —

Darkened color

color-contrast

@function color-contrast($base, $threshold: 150, $dark: #000000, $light: #ffffff) { ... }

View source

Description

Function for picking color contrast using the YIQ color space

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$base`	Base color	`Color`	— none
`$threshold`	yiq lightness that indicates change from dark to light, must be between 0 and 255.	`Number`	`150`
`$dark`	Dark contrast color	`Color`	`#000000`
`$light`	Light contrast color	`Color`	`#ffffff`

Returns

Color —

the color with the most contrast with $base.

strip-unit

@function strip-unit($number) { ... }

View source

Description

Strip the unit from a number

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$number`	Number to strip unit from	`Number`	— none

Returns

Number —

Unitless number

mixins

border-radius-top

@mixin border-radius-top($radius) { ... }

View source

Description

Top border-radius utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	border-radius value	`Number`	— none

border-radius-bottom

@mixin border-radius-bottom($radius) { ... }

View source

Description

Bottom border-radius utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	border-radius value	`Number`	— none

border-radius-left

@mixin border-radius-left($radius) { ... }

View source

Description

Left border-radius utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	border-radius value	`Number`	— none

border-radius-right

@mixin border-radius-right($radius) { ... }

View source

Description

Right border-radius utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$radius`	border-radius value	`Number`	— none

border

@mixin border($width: null, $style: null, $color: null) { ... }

View source

Description

Border utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	`border-width` property value	`Number`	`null`
`$style`	`border-style` property value	`String`	`null`
`$color`	`border-color` property value	`Color`	`null`

border-top

@mixin border-top($width: null, $style: null, $color: null) { ... }

View source

Description

Top border utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	`border-top-width` property value	`Number`	`null`
`$style`	`border-top-style` property value	`String`	`null`
`$color`	`border-top-color` property value	`Color`	`null`

border-bottom

@mixin border-bottom($width: null, $style: null, $color: null) { ... }

View source

Description

Bottom border utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	`border-bottom-width` property value	`Number`	`null`
`$style`	`border-bottom-style` property value	`String`	`null`
`$color`	`border-bottom-color` property value	`Color`	`null`

border-left

@mixin border-left($width: null, $style: null, $color: null) { ... }

View source

Description

Left border utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	`border-left-width` property value	`Number`	`null`
`$style`	`border-left-style` property value	`String`	`null`
`$color`	`border-left-color` property value	`Color`	`null`

border-right

@mixin border-right($width: null, $style: null, $color: null) { ... }

View source

Description

Right border utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	`border-right-width` property value	`Number`	`null`
`$style`	`border-right-style` property value	`String`	`null`
`$color`	`border-right-color` property value	`Color`	`null`

flex

@mixin flex($direction: column, $justify: null, $align: null, $wrap: null) { ... }

View source

Description

Flex container utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	`flex-direction` property value	`String`	`column`
`$justify`	`justify-content` property value	`String`	`null`
`$align`	`align-items` property value	`String`	`null`
`$wrap`	`flex-wrap` property value	`String`	`null`

inline-flex

@mixin inline-flex($direction: row, $justify: null, $align: null, $wrap: null) { ... }

View source

Description

Inline flex container utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$direction`	`flex-direction` property value	`String`	`row`
`$justify`	`justify-content` property value	`String`	`null`
`$align`	`align-items` property value	`String`	`null`
`$wrap`	`flex-wrap` property value	`String`	`null`

flex-item

@mixin flex-item($grow: null, $shrink: null, $basis: null, $align: null) { ... }

View source

Description

Flex item utility mixin (for children of a flex container)

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$grow`	`flex-grow` property value	`Number`	`null`
`$shrink`	`flex-shrink` property value	`Number`	`null`
`$basis`	`flex-basis` property value	`Number`	`null`
`$align`	`align-self` property value	`String`	`null`

position

@mixin position($position: null, $left: null, $right: null, $top: null, $bottom: null) { ... }

View source

Description

Positioning utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$position`	`position` property value	`String`	`null`
`$left`	`left` property value	`Number`	`null`
`$right`	`right` property value	`Number`	`null`
`$top`	`top` property value	`Number`	`null`
`$bottom`	`bottom` property value	`Number`	`null`

Used by

[mixin] absolute
[mixin] fixed

absolute

@mixin absolute($left: null, $right: null, $top: null, $bottom: null) { ... }

View source

Description

Absolute positioning utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$left`	`left` property value	`Number`	`null`
`$right`	`right` property value	`Number`	`null`
`$top`	`top` property value	`Number`	`null`
`$bottom`	`bottom` property value	`Number`	`null`

Requires

[mixin] position

fixed

@mixin fixed($left: null, $right: null, $top: null, $bottom: null) { ... }

View source

Description

Fixed positioning utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$left`	`left` property value	`Number`	`null`
`$right`	`right` property value	`Number`	`null`
`$top`	`top` property value	`Number`	`null`
`$bottom`	`bottom` property value	`Number`	`null`

Requires

[mixin] position

size

@mixin size($width, $height: $width) { ... }

View source

Description

Element size utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	`width` property value	`Number`	— none
`$height`	`height` property value	`Number`	`$width`

max-size

@mixin max-size($width, $height: $width) { ... }

View source

Description

Element max size utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	`max-width` property value	`Number`	— none
`$height`	`max-height` property value	`Number`	`$width`

min-size

@mixin min-size($width, $height: $width) { ... }

View source

Description

Element min size utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	`min-width` property value	`Number`	— none
`$height`	`min-height` property value	`Number`	`$width`

transform

@mixin transform($transform: null, $origin: null, $style: null) { ... }

View source

Description

Transform utility mixin

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$transform`	`transform` property value	`String`	`null`
`$origin`	`transform-origin` property value	`String`	`null`
`$style`	`transform-style` property value	`String`	`null`