Link color mixin

🚧

Whoa there!

This post contains code that's more than 11 years old. It might be fine, but you should probably check to make sure this isn't incredibly stupid by today's standards.

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.