Last active
October 6, 2016 00:30
-
-
Save ricardozea/39e1f0fc85af04b42d41 to your computer and use it in GitHub Desktop.
Sass mixin for links
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin linksColors-lvhaf($link, $visited, $hover, $active, $focus) { | |
| a { transition:.2s; padding:1%; margin:-1%; text-decoration:underline; | |
| & { color:$link; } | |
| &:visited { color:$visited; } | |
| &:hover { color:$hover; text-decoration:none; } | |
| &:active { color:$active; outline:#ccc 1px dotted; } | |
| &:focus { color:$focus; } | |
| } | |
| } | |
| //Usage | |
| @include linksColors-lvhaf { blue, purple, ligthen(blue,10), orange, red; } | |
| /* Note: | |
| Alebit not the pretiest , the letters "lvhaf" in the name represent the order in which the pseudo-classes have to appear. | |
| They also help remind you the order of the pseudo-classes. | |
| 1. Link | |
| 2. Visited | |
| 3. Hover | |
| 4. Active | |
| 5. Focus | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ligthen => lighten