Jump to menu

Vote down?

  1. 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](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.