Another link color mixin

You know, I just checked, and Compass does include something like this. Oh well. Compass splits the difference between this mixin and the one I posted the other day. Compass is built for reusability within any project, and not to be changed — just used. This one is built to be used within my project, where the mixin, not outside variables, defines my default colors.

If I want to reuse it, I’ll have to make some adjustments to it — namely I’ll have to define different colors. That’s obviously not ideal for a mixin library, where you need to be all things to all people, but it makes perfect sense here. Not all mixins need to be reused outside of your project.

This includes a reference to a transition mixin, but that’s only handling vendor prefixes. You can define your transition properties manually if you don’t use a mixin to help with prefixes.

@mixin links(
    $link: '#7ab4e5', 
    $visited: '#7ab4e5', 
    $hover: '#e62c25', 
    $active: 'lighten($hover, 10%)', 
    $focus: $hover, 
    $transition: '.15s color ease-in-out'
  ) {
  &:link    { color: $link;    }
  &:visited { color: $visited; }
  &:hover   { color: $hover;   }
  &:active  { color: $active;  }
  &:focus   { color: $focus;   }
  @include transition($transition);
}

Usage — all arguments are optional:

a {
  @include links(red, blue, green, yellow, purple, 1s all linear);
}