Useful SASS functions and mixins I keep using all the time build websites and applications

sass-functions.scss

//-----------------------------------------------
// Utility functions
//-----------------------------------------------
// this file contains utility functions used
// throughout the entire SASS project
// @author Andrés Osorio

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

//-------------------------------------------------------------
// convert a pixel value into an em value
// based on the context font-size
@function calc-em($target-px, $context: 16px) {
  @return #{($target-px / $context)}em;
}

// convert a pixel value into a rem value
// based on the root font size
@function calc-rem($size, $context: 16px) {
  $remSize: $size / $context;
  @return #{$remSize}rem;
}

/**
 * calculate CSS letter-spacing according to a tracking value
 * (as seen in design apps like Photoshop).
 * @param  {number} $target the target tracking number
 * @return {number}         the converted tracking in ems
 */
@function tracking( $target ){
  @return ($target / 1000) * 1em;
}

//-------------------------------------------------------------
/**
 * returns a selector for heading elements, from
 * the specified start to the specified end
 * @param  {number} $start  the start heading. A number from 1 to 6
 * @param  {number} $end    the end heading. A number from 2 to 6
 * @return {list}
 */
@function headings($start: 1, $end: 6) {
  @if $start > $end {
    @error "The first argument for headings() must be a number that is lower than or equal as the second argument.";
  }

  @if $start <= 0 or $start > 6 {
    @warn "the first argument for headings() must be greater than 0 and less than or equal to 6. Defaulting value to 1";
    $start: 1;
  }

  @if $end <= 0 or $end > 6 {
    @warn "the second argument for headings() must be less than 6. Defaulting value to 6";
    $end: 6;
  }

  $selector: unquote("h#{$start}");

  @for $heading from ($start + 1) to ($end + 1) {
    $selector: append($selector, unquote("h#{$heading}"), 'comma');
  }

  @return $selector;
}

/**
 * return a color that is registered in the colors map
 * @param  {string} $key the color key in the map
 * @return {mixed}
 */
@function get-color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  }

  @warn "Unknown value #{$key} in $colors.";
  @return null;
}

/**
 * easy way to fetch any of the predefined layer levels in the app (for z-index)
 * @param  {string} $key  the layer level to query for
 * @return {mixed}
 */
@function z-value($key: default) {
  @if map-has-key($z-layers, $key) {
    @return map-get($z-layers, $key);
  }

  @warn "Unknown z-layer level #{$key} in $z-layers.";
  @return null;
}

//------------------------------------------------------------------
/**
 * calculate the vw value of an absolute value (px, pt, etc)
 * based on the specified base width
 * @param  {number} $target the absolute value to convert to vw
 * @param  {number} $base   the base width to make the calculation against
 * @return {number}         the converted units in vw
 */
@function calc-vw($target, $base) {
  $vw-context: (strip-unit($base) * .01) * 1px;
  @return ($target/$vw-context) * 1vw;
}

/**
 * calculate the vh value of an absolute value (px, pt, etc)
 * based on the specified base width
 * @param  {number} $target the absolute value to convert to vh
 * @param  {number} $base   the base width to make the calculation against
 * @return {number}         the converted units in vh
 */
@function calc-vh($target, $base) {
  $vh-context: (strip-unit($base) * .01) * 1px;
  @return ($target/$vh-context) * 1vh;
}

/**
 * convert the desired absolute value to a vmin-equivalent unit
 * using the provided dimensions as a list
 * @param  {number} $target     the absolute value to convert to vmin
 * @param  {list}   $dimensions a space-separated list of dimensions (e.g: 1024px 768px)
 * @return {number}             the converted units in vmin
 */
@function calc-vmin($target, $dimensions) {
  @if type-of($dimensions) != list {
    @error "you must provide the dimensions as a list of width height or width,height (e.g: 1024px 768px);";
  }

  $w: strip-unit(nth($dimensions, 1));
  $h: strip-unit(nth($dimensions, 2));
  $vmin-context: $w;

  @if $w > $h {
    $vmin-context: $h;
  }

  @return ($target/$vmin-context) * 1vmin;
}

/**
 * convert the desired absolute value to a vmax-equivalent unit
 * using the provided dimensions as a list
 * @param  {number} $target     the absolute value to convert to vmax
 * @param  {list}   $dimensions a space-separated list of dimensions (e.g: 1024px 768px)
 * @return {number}             the converted units in vmax
 */
@function calc-vmax($target, $dimensions) {
  @if type-of($dimensions) != list {
    @error "you must provide the dimensions as a list of width height or width,height (e.g: 1024px 768px);";
  }

  $w: strip-unit(nth($dimensions, 1));
  $h: strip-unit(nth($dimensions, 2));
  $vmax-context: $w;

  @if $w < $h {
    $vmax-context: $h;
  }

  @return ($target/$vmax-context) * 1vmax;
}

sass-mixins.scss

/**
 * a mixin for including shared heading styles in the specified context
 * @param  {number} $start  the start heading. A number from 1 to 6
 * @param  {number} $end    the end heading. A number from 2 to 6
 */
@mixin headings($start: 1, $end: 6) {
  $selector: headings($start, $end);

  #{$selector} {
    @content;
  }
}