Functions and Mixins

@mixin font-setting($type) 

Usage: @include font-setting('secondary')

ParamDefaultDescription
$type 'primary' Version of font-setting. Options: primary | secondary

@function str-replace($string, $search, $replace) 

String replace for class names just like in JS. Used to rename map variables. Stolen from CSS Tricks.

ParamDefaultDescription
$string '' {String} Initial string (required)
$search '' {String} Substring to replace (required)
$replace '' {String} New value

@function px-to-rem($pixel-size, $context) 

Convert pixels to rem. EX: px-to-rem(16px)

ParamDefaultDescription
$pixel-size '' {String} Pixel value to convert (required)
$context $font-root {String} Substring to replace (defaults to $font-root)

@mixin gap($size) 

This is to account for the eminent deprecation of grid-gap. Some browsers honor gap, while others are living in the past with grid-gap. This keeps us working for both names. Eventually, we can remove this mixin in favor of just using gap. The new gap naming is introduced on Chrome 68+, Safari 11.2, Firefox 61+, and Edge 16+
Example: .my-grid { @include gap($size-m) }

ParamDefaultDescription
$size $size-b Size of gap

@mixin row-gap($size) 

This is to account for the eminent deprecation of [grid-row-gap]

ParamDefaultDescription
$size $size-b Size of gap

@mixin col-gap($size) 

This is to account for the eminent deprecation of [grid-column-gap]

ParamDefaultDescription
$size $size-b Size of gap

@mixin color-classes($color-map, $type) 

Generate color helper classes based on a map

$my-map: ('purple': rebeccapurple, 'blue': dodgerblue)
@include($my-map, 'bg')

ParamDefaultDescription
$color-map '' A sass map variable (required)
$type '' Either 'bg', 'text' or 'text-hover' (required)

@mixin mq($from, $until, $and, $media-type) 

@include mq($from: bp-l)

ParamDefaultDescription
$from false {String | Boolean} One of $mq-breakpoints
$until false {String | Boolean} One of $mq-breakpoints
$and false {String | Boolean} Additional media query parameters
$media-type {String} ($mq-media-type) Media type: screen, print…