Sass Mixin for Links

This is a link

The idea behind this mixin is that no defaults are declared in the arguments so that we are “forced” in a friendly way to declare all 4 states of our links.

The :focus and :active pseudo-classes are usually declared together. Feel free to separate them if you want to do so.

One note about this mixin, is that it can be applied to any HTML element, not only links.


Mixin:

@mixin links ($link, $visited, $hover, $active) {
    & {
        color: $link;
        &:visited {
            color: $visited;
        }
        &:hover {
            color: $hover;
        }
        &:active, &:focus {
            color: $active;
        }
    }
}

Usage:

a {
    @include links(orange, blue, yellow, teal);
}

Compiles to:

a {
  color: orange;
}
a:visited {
  color: blue;
}
a:hover {
  color: yellow;
}
a:active, a:focus {
  color: teal;
}