/// Slightly lightens a color.
/// @param  {Color}  $color
/// @param  {Number} $percentage
/// @return {Color}
@function tint($color, $percentage) {
    @return mix($color, white, $percentage);
}

/// Slightly darkens a color.
/// @param  {Color}  $color
/// @param  {Number} $percentage
/// @return {Color}
@function shade($color, $percentage) {
    @return mix($color, black, $percentage);
}

Sources

• The Anti-hero of CSS Layout - "display:table"