ricardozea
10/13/2014 - 6:42 PM

Sass mixin for links

Sass mixin for links

@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
*/