General

functions

average

@function average($nums) { ... }

Description

Get the average of numbers provided a list of numbers

Parameters

NameDescriptionTypeDefault value
$nums

a list of numbers to average out

List—

Returns

Number —

the average of all values

Example

average(10, 60, 20);
// 30

Used by

best-contrast

Since 0.1.0
@function best-contrast($color, $color1, $color2, $ratio1: "AA", $ratio2: "$ratio1") { ... }

Description

Get the best contrasted color when compared against two colors

Parameters

NameDescriptionTypeDefault value
$color

Color to be modified

Color—
$color1

1st color to test the contrast against

Color—
$color2

2nd color to test the contrast against

Color—
$ratio1

minimum ratio to test against. Accepted values for this ratio argument are AA and AAALG (4.5:1), AALG (3:1) and AAA (7:1) or a number between 1 and 21.

String or Number"AA"
$ratio2

a second minimum ration to test against. Accepted values for this ratio argument are AA and AAALG (4.5:1), AALG (3:1) and AAA (7:1) or a number between 1 and 21.

String or Number"$ratio1"

Returns

Color —

Updated color

Example

// using recommended ratio for links
best-contrast(blue, white, black, 4.5, 3)
// #4d4dff

// usage
.image-caption a {
  color: best-contrast(blue, gray, white);
}

Throws

  • Warning if color fails to contrast with $color1 and/or $color2

Requires

Links

Author

  • Giana Blantin

next

Since 0.1.0
@function next($name, $breakpoints, $breakpoint-names: map-keys($breakpoints)) { ... }

Description

Name of the next breakpoint, or null for the last breakpoint. Breakpoints are defined as a map of (name: minimum width), order from small to large: (xs: 0, sm: 34rem, md: 45rem)

The map defined in the $grid-breakpoints global variable is used as the $breakpoints argument by default.

Parameters

NameDescriptionTypeDefault value
$name

the name for the breakpoint

String—
$breakpoints

a map of grid breakpoints

Map—
$breakpoint-names

a list of names for breakpoints when passed a map of breakpoints

Listmap-keys($breakpoints)

Returns

String —

the name of next breakpoint when passed a map of breakpoints

Example

@include breakpoint-next(sm)
// md
@include breakpoint-next(sm, $breakpoints: (xs: 0, sm: 34rem, md: 45rem))
// md
@include breakpoint-next(sm, $breakpoint-names: (xs sm md))
// md

Throws

  • breakpoint #{$name} not found in #{$breakpoints}

Used by

Author

  • Mark Otto

min-width

Since 0.1.0
@function min-width($name, $breakpoints) { ... }

Description

Minimum breakpoint width

Parameters

NameDescriptionTypeDefault value
$name

the name for the breakpoint

String—
$breakpoints

a map of grid breakpoints

Map—

Returns

Number</code> or <code>Null —

the minimum value is calculated as the minimum of the next one or null for the smallest (first) breakpoint

Example

@include breakpoint-min(sm, (xs: 0, sm: 34rem, md: 45rem))
// 34rem

Used by

Author

  • Mark Otto

max-width

Since 0.1.0
@function max-width($name, $breakpoints) { ... }

Description

Maximum breakpoint width. The maximum value is calculated as the minimum of the next one less 0.02px to work around the limitations of min- and max- prefixes and viewports with fractional widths. See https://www.w3.org/TR/mediaqueries-4/#mq-min-max Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. See https://bugs.webkit.org/show_bug.cgi?id=178261

Parameters

NameDescriptionTypeDefault value
$name

the name for the breakpoint

String—
$breakpoints

a map of grid breakpoints

Map—

Returns

Number</code> or <code>Null —

the maximum value is calculated as the minimum of the next one less 0.1 or null for the largest (last) breakpoint.

Example

@include breakpoint-max(sm, (xs: 0, sm: 34rem, md: 45rem))
// 44.9rem

Requires

Author

  • Mark Otto

check-contrast

Since 1.12.0 — <p>The Sith</p>
@function check-contrast($color1, $color2, $min-ratio: "AA", $return-ratio: "false") { ... }

Description

Checks if two colors pass minimum contrast requirements

Parameters

NameDescriptionTypeDefault value
$color1

1st color to test the contrast against

Color—
$color2

2nd color to test the contrast against

Color—
$min-ratio

minimum ratio to test against. Accepted values for this ratio argument are AA and AAALG (4.5:1), AALG (3:1) and AAA (7:1) or a number between 1 and 21.

String or Number"AA"
$return-ratio

option to return ratio instead of true/false

Bool"false"

Returns

Number</code> or <code>Bool —

A ratio or boolean if the colors meet the min-ratio

Example

// true/false & using a number as `$min-ratio`
check-contrast(#2aaabf, #2b2f31, 3)
// true

// ratio & using a keyword as `$min-ratio`
check-contrast(#ffbb9b, #91966d, AAALG, true)
// 1.8908

// if contrast between blue & white passes, use gray, otherwise use #fff
.image-caption {
  color: if( check-contrast(blue, white, AAA), gray, #fff );
}

Requires

Used by

Links

Author

  • Giana Blantin

deg45

Since 0.1.0
@function deg45() { ... }

Description

Gives us 45 degrees of a circle

Parameters

None.

Returns

Number —

0.7853981634

Used by

circle-angle

Since 0.1.0
@function circle-angle($size) { ... }

Description

Gets the radius of a circle

Parameters

NameDescriptionTypeDefault value
$size

the expected size

Number—

Returns

Number —

an offset used for box-shadow

Requires

circle-normal

Since 0.1.0
@function circle-normal($size) { ... }

Description

Gets the angle of a circle

Parameters

NameDescriptionTypeDefault value
$size

the expected size

Number—

Returns

Number —

an offset used for box-shadow

Requires

collect

Since 0.1.0
@function collect($lists) { ... }

Description

Joins more than 1 list into a flattened list

Parameters

NameDescriptionTypeDefault value
$lists

any number of lists to combine

List—

Returns

List —

a flattened list

Example

$somecollection: collect($list1, $list2, ...);

exp

Since 0.1.0
@function exp($x) { ... }

Description

Returns E^x, where x is the argument, and E is Euler's constant, the base of the natural logarithms.

Parameters

NameDescriptionTypeDefault value
$x

the number to modify exponentially

Number—

Returns

Number —

a modified number

Example

exp(1)  // 2.71828
exp(-1) // 0.36788

Requires

Author

  • Takeru Suzuki

fact

Since 0.1.0
@function fact($x) { ... }

Description

Returns the factorial of a non-negative integer.

Parameters

NameDescriptionTypeDefault value
$x

A non-negative integer.

Number—

Returns

Number —

modified number

Example

fact(0) // 1
fact(8) // 40320

Throws

  • @warn Argument for fact() must be a positive integer

Used by

Author

  • Takeru Suzuki

fix-color

Since 0.1.0
@function fix-color($color1, $color2, $min-ratio: "AA", $iterations: "5") { ... }

Description

Tries to fix contrast by adjusting $color1

Parameters

NameDescriptionTypeDefault value
$color1

1st color to test the contrast against

Color—
$color2

2nd color to test the contrast against

Color—
$min-ratio

minimum ratio to test against. Accepted values for this ratio argument are AA and AAALG (4.5:1), AALG (3:1) and AAA (7:1) or a number between 1 and 21.

String or Number"AA"
$iterations

number of iterations to figure out contrast

Number"5"

Returns

Color —

a modified color

Example

// using a number as `$min-ratio`
fix-color(#00bdd1, #005da3, 3.75)
// #00d4ea

// using a keyword as `$min-ratio`
fix-color(#3f464a, #678d7e, AAA)
// #000

// usage
.image-caption {
  color: fix-color(blue, gray);
}

Requires

Used by

Links

Author

  • Giana Blantin

fix-contrast

Since 0.1.0
@function fix-contrast($color1, $color2, $min-ratio: "AA", $balance: "50") { ... }

Description

Tries to fix contrast of both colors by weighted balance (0–100). 0 = don't change first color, change second color; 100 = change first color, don't change second color

Parameters

NameDescriptionTypeDefault value
$color1

1st color to test the contrast against

Color—
$color2

2nd color to test the contrast against

Color—
$min-ratio

minimum ratio to test against. Accepted values for this ratio argument are AA and AAALG (4.5:1), AALG (3:1) and AAA (7:1) or a number between 1 and 21.

String or Number"AA"
$balance

a number that lets you control how the colors are scaled to satisfy the contrast requirements

Number"50"

Returns

List —

a list with both colors, use nth($result, 1) and nth($result, 2) to get colors

Example

// favoring $color1 change over $color2
fix-contrast(#aaf901, #bbffc8, 6, 70%)
// #460, #cfffd9

// splitting the difference between both colors equally
fix-contrast(#e5eae1, #9dffff, 3)
// #8b9089, #ceffff

// usage
.image-caption {
   $colors: fix-contrast(gray, blue, 5, 60%);
   background: nth($colors, 2);
   color: nth($colors, 1);
}

Throws

  • Warning Your settings didn't work. Modifying first color or second color in an attempt to fix.

Requires

Links

Author

  • Giana Blantin

force-rgb

Since 0.1.0
@function force-rgb($r, $g, $b) { ... }

Description

Forces RGB channel values to a rgb() string

Parameters

NameDescriptionTypeDefault value
$r

R channel value

Number—
$g

G channel value

Number—
$b

B channel value

Number—

Returns

String —

RGB string

Example

// using strings around rgb components
.blah {
  color: rgb('255', '255', '255');
}
// @error: `$red`: "255" is not a number for `rgb`

.blah {
  color: force-rgb('255', '255', '255');
}
// color: rgb(255, 255, 255);

Author

  • Giana Blantin

force-rgba

Since 0.1.0
@function force-rgba($r, $g, $b, $a) { ... }

Description

Forces RGBA channel values to a rgba() string

Parameters

NameDescriptionTypeDefault value
$r

R channel value

Number—
$g

G channel value

Number—
$b

B channel value

Number—
$a

A channel value

Number—

Returns

String —

RGBA string

Example

// using strings around rgb components
.blah {
  color: rgba('255', '255', '255', '0.5');
}
// @error: `$red`: "255" is not a number for `rgba`

.blah {
  color: force-rgba('255', '255', '255', '0.5');
}
// color: rgba(255, 255, 255, .5);

Author

  • Giana Blantin

frexp

Since 0.1.0
@function frexp($x) { ... }

Description

Returns a two-element list containing the normalized fraction and exponent of number.

Parameters

NameDescriptionTypeDefault value
$x—Number—

Returns

List —

fraction, exponent

Author

  • Takeru Suzuki

get-contrast-ratio

Since 0.1.0
@function get-contrast-ratio($ratio) { ... }

Description

Get a contrast ratio from either a number or keyword

Parameters

NameDescriptionTypeDefault value
$ratio

a number ratio or keyword specifying a type of WCAG contrast specification

String or Number—

Returns

Number —

a contrast ratio

Used by

in-bounds

Since 0.1.0
@function in-bounds($value, $min: "0", $max: "1") { ... }

Description

Checks if value is within specified bounds, inclusive

Parameters

NameDescriptionTypeDefault value
$value

a number to check

Number—
$min

minimum number

Number"0"
$max

maximum number

Number"1"

Returns

Bool —

if the number is within range

Example

// outside the bounds
in-bounds(-1);
// false

//nside the bounds
in-bounds(1);
// true

Used by

Author

  • Takeru Suzuki

is-nan

Since 0.1.0
@function is-nan($value) { ... }

Description

Check if value is not a number, eg, NaN or Infinity

Parameters

NameDescriptionTypeDefault value
$value

a number to check

Number—

Returns

Bool —

true if not a number, false if it is a number

Example

// not a number
is-nan('true');
// true

// is a number
is-nan(1);
// false

Author

  • Takeru Suzuki

ldexp

Since 0.1.0
@function ldexp($x, $exp) { ... }

Description

Returns $x * 2^$exp

Parameters

NameDescriptionTypeDefault value
$x—Number—
$exp—Number—

Returns

Number —

modified number

Author

  • Takeru Suzuki

luminance

Since 0.1.0
@function luminance($color) { ... }

Description

Get the luminance of color

Parameters

NameDescriptionTypeDefault value
$color

Color to be modified

Color—

Returns

Number —

relative luminance of color

Requires

Used by

Author

  • Giana Blantin

map-deep-get

Since 0.1.0
@function map-deep-get($map, $keys...) { ... }

Description

Searches through maps and grabs the key when it finds the map specified

Parameters

NameDescriptionTypeDefault value
$map

a structured map

Map—
$keys

the key value to grab

Arglist—

Returns

Any type —

Desired value from the map(s)

Author

  • Hugo Giraudel

opposite-direction

Since 0.1.0
@function opposite-direction($directions) { ... }

Description

Returns the opposite direction of each direction in a list

Parameters

NameDescriptionTypeDefault value
$directions

List of initial directions

List—

Returns

List —

List of opposite directions

Example

.triange-left {
  border-#{opposite-direction(left)}: 1.5em solid gray;
}

Throws

  • @warn No opposite direction can be found

Author

  • Hugo Giraudel

rad

Since 0.1.0
@function rad($angle) { ... }

Description

Returns a radian when given a degree

Parameters

NameDescriptionTypeDefault value
$angle—Number—

Returns

Number —

a radian

Example

rad(45deg) // 0.78539816

Author

  • Daniel Perez Alvarez

scale-light

Since 0.1.0
@function scale-light($color, $color, $min-ratio, $operation, $iterations) { ... }

Description

Scales lightness by .1% while checking contrast ratio.

Parameters

NameDescriptionTypeDefault value
$color

Color to be modified

Color—
$color

Color to be tested against

Color—
$min-ratio

minimum ratio to test against. Accepted values for this ratio argument are AA and AAALG (4.5:1), AALG (3:1) and AAA (7:1) or a number between 1 and 21.

String or Number—
$operation

darken() or lighten()

Function—
$iterations

Number of iterations to perform specified operation

Number—

Returns

Color —

modified color

Requires

Used by

Links

Author

  • Giana Blantin

scale-luminance

Since 0.1.0
@function scale-luminance($color, $target-luminance) { ... }

Description

Changes a color to have the required luminance

Parameters

NameDescriptionTypeDefault value
$color

Color to be modified

Color—
$target-luminance

a number between 0 and 1

Number—

Returns

Color —

modified color

Requires

Used by

TODO's

  • DRY out the checks on line 36-49

Author

  • Giana Blantin

shade

Since 0.1.0
@function shade($color, $percent) { ... }

Description

Darkens a color by mixing it with black

Parameters

NameDescriptionTypeDefault value
$color

a color

Color—
$percent

a percentage to mix the color with black

Percentage—

Returns

Color —

modified color

Example

a:hover {
  background-color: shade(blue, 50%);
}

Author

  • Newton Koumantzelis

srgb

Since 0.1.0
@function srgb($channel) { ... }

Description

Reverse of xyz()

Parameters

NameDescriptionTypeDefault value
$channel

an xyz value

Number—

Returns

Number —

rgb channel value

Used by

Links

Author

  • Giana Blantin

str-replace-batch

Since 0.1.0
@function str-replace-batch($haystack, $needles, $replacement) { ... }

Description

Replaces a batch of substrings (needles) in a string (haystack) with a single replacement string.

Parameters

NameDescriptionTypeDefault value
$haystack

string to perform search and replacement on

String—
$needles

string or list of strings to replace globally

List or String—
$replacement

('') - replacement string to replace needles

String—

Returns

String —

replaced string

Author

  • David Khourshid

str-replace

Since 0.1.0
@function str-replace($string, $search, $replace: "") { ... }

Description

Replace $search with $replace in $string

Parameters

NameDescriptionTypeDefault value
$string

Initial string

String—
$search

Substring to replace

String—
$replace

New value

String""

Returns

String —

Updated string

Example

.lato-thin {
  font-family: str-replace('lato-thin', '-', ' ');
}

Author

  • Hugo Giraudel

strip-unit

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

Description

Strip unit from a number

Parameters

NameDescriptionTypeDefault value
$number

any valid CSS value with unit

Unit—

Returns

Number —

modified number

Example

strip-unit(2px) // 2
strip-unit(5em) // 5

Author

  • Hugo Giraudel

tint

Since 0.1.0
@function tint($color, $percent) { ... }

Description

Lightens a color by mixing it with white

Parameters

NameDescriptionTypeDefault value
$color

a color

Color—
$percent

a percentage to mix the color with white

Percentage—

Returns

Color —

modified color

Example

a:active {
  background-color: tint(blue, 20%);
}

Author

  • Newton Koumantzelis

to-length

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

Description

Add $unit to $value

Parameters

NameDescriptionTypeDefault value
$value

Value to add unit to

Number—
$unit

String representation of the unit

String—

Returns

Number —

$value expressed in $unit

Throws

  • Invalid unit #{$unit}.

Used by

Author

  • Hugo Giraudel

to-number

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

Description

Casts a string into a number

Parameters

NameDescriptionTypeDefault value
$value

Value to be parsed

String or Number—

Returns

Number

Throws

  • Value for to-number should be a number or a string.

Requires

Used by

Author

  • Hugo Giraudel

valid-quantity

Since 0.1.0
@function valid-quantity($quantity) { ... }

Description

Creates valid-quantity

Parameters

NameDescriptionTypeDefault value
$quantity

a valid Number

Number—

Returns

Bool

Example

@if valid-quanity(4) {
  color: blue;
}

Author

  • Adam Giese

xyz

Since 0.1.0
@function xyz($channel) { ... }

Description

Returns an RGB channel processed as XYZ

Parameters

NameDescriptionTypeDefault value
$channel

an RGB channel value

Number—

Returns

Number —

xyz value

Used by

Links

Author

  • Giana Blantin