skip to main content

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.