Skip to content

24 ways to impress your friends

Vote up?

Martin de Lima

Great article. Setting colors for active and focus states, keyboard navigation and ARIA roles are all very easy to implement and give great returns. I love the small nod to [Dinosaur Comics](, too!

Compass has a [link-colors]( mixin, though the order’s a bit weird (link, hover, active, visited, focus). Here it is with the (arguably) more common LVHAF order:

@mixin link-colors($normal, $visited: false, $hover: false, $active: false, $focus: false) { color: $normal; &:link { color: $normal ; } @if $visited { &:visited { color: $visited; } } @if $hover { &:hover { color: $hover; } } @if $active { &:active { color: $active; } } @if $focus { &:focus { color: $focus; } }

So you just go `a { @include link-colors( Salmon, Salmon, MistyRose, MistyRose, MistyRose ) }` and you get complete link colors.