Functions

px-to-rem($size)

This is used to convert px to rems based upon the $base-font-size var in the vars scss sheet @param {Number} $size - Size of element based on px - ‘16px’…cannot be ‘16’ @return {Number} - Returned is translated $size in rems

.link {
    font-size: px-to-rem(20px);
}

get-line-height($fontsize, $lineheight)

This will return a decimal place line height, based upon the px values of the font size and line-height (useful for breakpoints where a font size changes but the line height doesn’t). @param {Number} $fontsize - font size of text based on px @param {Number} $lineheight - line height of text based on px @return {Number} - Returned is translated $lineheightSize decimal places

.link {
    line-height: get-line-height(20, 32);
}

aspect-ratio($width, $height)

This is mainly for the lazyload component, it will take the height and width and return the aspec ratio as a decimal percentage number, so you can use it as padding top. @param {Number} $height - height of element @param {Number} $width - width of element @return {Number} - Returned is % value used for lazyload images

.lazyloadimage {
    padding-top: aspect-ratio(200, 320);
}

z-index($layer)

function to control z-index based on $z-layers map in the vars file @param {String} $layer - Key name from $z-layers map @return {Number} - Returned is the number value from $z-layers map, if no name could be found a warning will be returned

.lazyloadimage {
    z-index: z-index('default');
}

map-get-next($map, $key, $fallback: false, $return: value)

Explanation here. This is used in the creation of responsive utility classes.