A sass function that returns a value to apply to a margin in order to vertically or horizontally align two elements.

get-diff-to-align.scss

/// Contexts
/// @author Loïc Goyet
/// @param {Unit} $element1
/// @param {Unit} $element2
/// @param {Bool} $invert
/// @warn the params $big-element & $small-element must share the same type of
/// unit
@function get-diff-to-align($element1, $element2, $invert: true) {
  $big-element: if($element1 > $element2, $element1, $element2);
  $small-element: if($element1 > $element2, $element2, $element1);

  $diff: ($big-element - $small-element); // get the strict difference
  $diff: round($diff / 2); // divide the diff by two for each side
  $diff: if($invert, $diff * -1, $diff);
  @return $diff;
}