Smarter Underline Mixin SCSS

underline.scss

@function em($pixels, $context: 16) {
  @return #{$pixels/$context}em;
}

@mixin underline($color: black, $hover: black, $background: white, $position: 16.5, $thickness: 0.08em) {

  $underline-position: em($position);
  $underline-color: $color;
  $underline-color-hover: $hover;
  $underline-color-shadow: $background;
  $underline-thickness: $thickness;

  text-shadow:
    0 -0.02em $underline-color-shadow,
    0 0.02em $underline-color-shadow,
    0 -0.05em $underline-color-shadow,
    0 0.05em $underline-color-shadow,
    0 -0.07em $underline-color-shadow,
    0 0.07em $underline-color-shadow,
    0.03em 0 $underline-color-shadow,
    -0.03em 0 $underline-color-shadow,
    0.03em -0.03em $underline-color-shadow,
    -0.03em -0.03em $underline-color-shadow,
    -0.03em 0.03em $underline-color-shadow,
    0.03em 0.03em $underline-color-shadow,
    0.06em 0 $underline-color-shadow,
    -0.06em 0 $underline-color-shadow,
    0.09em 0 $underline-color-shadow,
    -0.09em 0 $underline-color-shadow,
    0.12em 0 $underline-color-shadow,
    -0.12em 0 $underline-color-shadow;

  background-color: transparent;

  background-image:
    linear-gradient($underline-color, $underline-color),
    linear-gradient($underline-color, $underline-color),
    linear-gradient($underline-color, $underline-color);

  background-size:
    0 $underline-thickness,
    0 $underline-thickness,
    $underline-thickness $underline-thickness;

  background-repeat:
    no-repeat,
    no-repeat,
    repeat-x;

  background-position:
    0%    $underline-position,
    100%  $underline-position,
    0%    $underline-position;

  &:hover,
  &:active,
  &:focus {

    background-image:
      linear-gradient($underline-color-hover, $underline-color-hover),
      linear-gradient($underline-color-hover, $underline-color-hover),
      linear-gradient($underline-color-hover, $underline-color-hover);

  }

}

// Useage like so:
/*
.my-class {
  @include underline(blue, tomato);
}
*/

Enough of a distance from the bleeding edge for me. ;)