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](http://qwantz.com), too!
Compass has a [link-colors](http://compass-style.org/reference/compass/utilities/links/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:
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](http://qwantz.com), too!
Compass has a [link-colors](http://compass-style.org/reference/compass/utilities/links/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.