Nicer links

link-line.scss

$browser-context: 16;

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em
}

@mixin link-line($shadow, $shadow-context, $color, $position, $size) {
  text-shadow: em(1,$shadow-context) 0 0 $shadow, em(2,$shadow-context) 0 0 $shadow,
               em(3,$shadow-context) 0 0 $shadow, em(-1,$shadow-context) 0 0 $shadow,
               em(-2,$shadow-context) 0 0 $shadow, em(-3,$shadow-context) 0 0 $shadow,
               0 em(1,$shadow-context) 0 $shadow, 0 em(2,$shadow-context) 0 $shadow,
               0 em(-1,$shadow-context) 0 $shadow, 0 em(-2,$shadow-context) 0 $shadow;
  background-image: -webkit-linear-gradient($color, $color);
  background-image: -moz-linear-gradient($color, $color);
  background-image: -ms-linear-gradient($color, $color);
  background-image: linear-gradient($color, $color);
  background-position: 0 $position;
  background-size: $size $size;
  background-repeat: repeat-x;
}

usage.scss

a {
  @include link-line(#fff, 16, #000, em(18,16), 1px);
}