sass-site/source/assets/stylesheets/foundation/_links.scss

// ===========================================================================
// LINKS



$tappable-size: 44px;

@mixin tappable {
  display: inline-block;
  min-width:   $tappable-size;
  min-height:  $tappable-size;
  line-height: $tappable-size;
}



// ---------------------------------------------------------------------------
// EASY LINK COLORS

$link-color:        $midnight-blue           !default;
$link-hover-color:  darken($link-color, 10%) !default;
$link-active-color: darken($link-color, 20%) !default;

$hover: "&:hover, &:focus";

@mixin link($link-setting: $link-color, $hover-setting: $link-hover-color, $active-setting: $link-active-color) {

  border-color: mix(mix($link-setting, $white), $white);

  &,
  &:visited { color: $link-setting; }

  #{$hover} { color: $hover-setting;  }

  &:active  { color: $active-setting; }
}



// ---------------------------------------------------------------------------
// LINK STYLES

a {
  text-decoration: none;
  padding-bottom: 1px;
  border: {
    bottom-width: 1px;
    bottom-style: solid;
  }
  @include link;
}