Skip to content

Instantly share code, notes, and snippets.

@souporserious
Created January 29, 2016 10:46
Show Gist options
  • Save souporserious/e26c2f81fa57c6c47347 to your computer and use it in GitHub Desktop.
Save souporserious/e26c2f81fa57c6c47347 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
/* Old */
@mixin link($link, $hover: $link, $active: $link, $focus: $link, $visited: $link) {
$sameProps: ();
& {
@if $hover != $link {
&:hover {
color: $hover;
}
} @else {
$sameProps: append($sameProps, '&:hover', comma)
}
@if $active != $link {
&:active {
color: $active;
}
} @else {
$sameProps: append($sameProps, '&:active', comma)
}
@if $focus != $link {
&:focus {
color: $focus;
}
} @else {
$sameProps: append($sameProps, '&:focus', comma)
}
@if $visited != $link {
&:visited {
color: $visited;
}
} @else {
$sameProps: append($sameProps, '&:visited', comma)
}
&, #{$sameProps} {
color: $link;
}
}
}
a {
@include link(red, green, blue)
}
/* New */
@mixin _link($initial-state, $states) {
$same-props: ();
$states: map-merge((
'hover': $initial-state,
'active': $initial-state,
'focus': $initial-state,
'visited': $initial-state,
), $states);
@each $state, $color in $states {
@if ($initial-state != $color) {
&:#{$state} {
color: $color;
}
} @else {
$same-props: append($same-props, '&:#{$state}', 'comma');
}
}
&, #{$same-props} {
color: $initial-state;
}
}
a {
@include _link(red, ('hover': green, 'active': green));
}
a:hover {
color: green;
}
a:active {
color: blue;
}
a, a:focus, a:visited {
color: red;
}
/* New */
a:hover {
color: green;
}
a:active {
color: blue;
}
a, a:focus, a:visited {
color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment