Link color mixin

I needed a mixin for links, so I made this.

I needed a mixin for links, so I made this.

I want to be able to have linked headings look just like normal headings, without inheriting the color for standard links. For example, for standard links, I’ll include this:

a {
  @include links;
}

Since I don’t want my headings to stand out as links, I’ll do this for them:

h1 a {
  @include links($link: #222, $visited: #222);
}

To break this down a bit further, I define some variables for the project. Then, I create the mixin, which can take optional arguments for the various link state colors, and a transition. If I don’t define a value when I include the mixin, it will just inherit the defaults that I set in the variables. If I do, it will override.

// These are global colors

$lcolor: #7ab4e5;
$vcolor: #7ab4e5;
$hcolor: #e62c25;
$acolor: lighten($hcolor, 10%);
$fcolor: $hcolor;
$link-transition: .15s color ease-in-out

// Mixin will let you override globals... or not, depending on what you pass to it.

@mixin links($link:"", $visited:"", $hover:"", $active:"", $focus:"", $transition:"") {
  &:link {
    @if $link != ""       { color: #{$link}; }
    @else                 { color: $lcolor; }
  }
  &:visited {
    @if $visited != ""    { color: #{$visited}; }
    @else                 { color: $vcolor; }
  }
  &:hover {
    @if $hover != ""      { color: #{$hover}; }
    @else                 { color: $hcolor; }
  }
  &:active {
    @if $active != ""     { color: #{$active}; }
    @else                 { color: #e62c25; }
  }
  &:focus {
    @if $focus != ""      { color: #{$focus}; }
    @else                 { color: $fcolor; }
  }
  @if   $transition != "" { @include transition(#{$transition}); }
  @else                   { @include transition($link-transition); }
}

I use Bourbon to power the transition mixin, but I think Compass‘s mixin will work just as well.