functions

Survival Kit: Functions

Calculations

@function calc-percent($target, $container)
  @return ($target / $container) * 100%

@function calc-em($target, $container)
  @return ($target / $container) * 1em

// shortcut name
@function cp($target, $container)
  @return calc-percent($target, $container)

@function ce($target, $container)
  @return calc-em($target, $container)

// return the width of an arbitrary number of columns in a css grid system
@function calc-col-width($number-of-cols)
  $calc-width: ($kit-col-width * $number-of-cols) + ($kit-gutter-width * ($number-of-cols - 1))
  @return $calc-width

Color

// Add percentage of white to a color
@function tint($color, $percent)
  @return mix(white, $color, $percent)

// Add percentage of black to a color
@function shade($color, $percent)
  @return mix(black, $color, $percent)

Modular Scales

See: https://github.com/scottkellum/modular-scale

Color Schemer

See: https://github.com/scottkellum/color-schemer