<h1>Sass Mixin for Links</h1>
<a href="#">This is a link</a>
<hr />
<p>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.</p>
<p>The <code>:focus</code> and <code>:active</code> pseudo-classes are usually declared together. Feel free to separate them if you want to do so.</p>
<p>One note about this mixin, is that it can be applied to any HTML element, not only links.</p>
<hr />
<h2>Mixin:</h2>
<pre><code class="css">@mixin links ($link, $visited, $hover, $active) {
    & {
        color: $link;
        &:visited {
            color: $visited;
        }
        &:hover {
            color: $hover;
        }
        &:active, &:focus {
            color: $active;
        }
    }
}
</code></pre>
<h2>Usage:</h2>
<pre><code class="css">a {
    @include links(orange, blue, yellow, teal);
}</code></pre>
<h2>Compiles to:</h2>
<pre><code class="css">a {
  color: orange;
}
a:visited {
  color: blue;
}
a:hover {
  color: yellow;
}
a:active, a:focus {
  color: teal;
}</code></pre>

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

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

//Styling not needed for demo
a {
    padding: 4px 10px;
    font-size: 20px;
    background: #444;
}
pre, code, p { text-align: left; }
code { background: none; box-shadow: none; font-size: 18px; }
h2 { text-align: left; }
* { font-weight: normal !important /*o_O*/; }

/*Highlight.JS
https://highlightjs.org/
*/
hljs.initHighlightingOnLoad();