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.