Last active
January 26, 2017 09:09
-
-
Save dalgard/9078463 to your computer and use it in GitHub Desktop.
A Sass mixin for quickly setting link states – test it on http://sassmeister.com/ (see more examples in the comments)
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
/* | |
All arguments *may* be space separated lists: | |
@include link-states(<properties>, <normal values>[, <state values>] | |
[, <:active values>][, <:focus values>]); | |
Example: | |
a { | |
@include link-states(color, red, blue); | |
} | |
Output: | |
a { | |
color: red; | |
} | |
a:hover, a:focus, a:active { | |
color: blue; | |
} | |
If <normal value> is a color, then positive percentages in state values | |
will lighten the color and negative percentages will darken it | |
Values cascade. Use null to prevent outputting a value | |
*/ | |
@mixin link-states( | |
$properties, | |
$values, | |
$states-values: $values, | |
$active-values: $states-values, | |
$focus-values: $states-values) { | |
@if length($properties) > 1 { | |
@for $i from 2 to length($properties) + 1 { | |
@if length($values) < $i { $values: append($values, nth($values, length($values))); } | |
@if length($states-values) < $i { $states-values: append($states-values, nth($states-values, length($states-values))); } | |
@if length($active-values) < $i { $active-values: append($active-values, nth($active-values, length($active-values))); } | |
@if length($focus-values) < $i { $focus-values: append($focus-values, nth($focus-values, length($focus-values))); } | |
} | |
} | |
$prop-val-list: zip( | |
$properties, | |
$values, | |
$states-values, | |
$active-values, | |
$focus-values | |
); | |
$states-sel: unquote('&:hover'); | |
$active-sel: unquote('&:active'); | |
$focus-sel: unquote('&:focus'); | |
@if $active-values == $states-values { | |
$states-sel: append($states-sel, $active-sel, comma); | |
$active-sel: null; | |
} | |
@if $focus-values == $states-values { | |
$states-sel: append($states-sel, $focus-sel, comma); | |
$focus-sel: null; | |
} | |
@each $prop-val in $prop-val-list { | |
$property: nth($prop-val, 1); | |
$value: nth($prop-val, 2); | |
#{$property}: $value; | |
} | |
#{$states-sel} { | |
@each $prop-val in $prop-val-list { | |
$property: nth($prop-val, 1); | |
$value: nth($prop-val, 2); | |
$states-value: nth($prop-val, 3); | |
@if type-of($value) == 'color' { | |
@if type-of($states-value) == 'number' and unit($states-value) == '%' { | |
@if $states-value < 0% { $states-value: darken($value, $states-value * -1); } | |
@else { $states-value: lighten($value, $states-value); } | |
} | |
} | |
#{$property}: $states-value; | |
} | |
} | |
@if $active-sel { | |
#{$active-sel} { | |
@each $prop-val in $prop-val-list { | |
$property: nth($prop-val, 1); | |
$value: nth($prop-val, 2); | |
$active-value: nth($prop-val, 4); | |
@if type-of($value) == 'color' { | |
@if type-of($active-value) == 'number' and unit($active-value) == '%' { | |
@if $active-value < 0% { $active-value: darken($value, $active-value * -1); } | |
@else { $active-value: lighten($value, $active-value); } | |
} | |
} | |
#{$property}: $active-value; | |
} | |
} | |
} | |
@if $focus-sel { | |
#{$focus-sel} { | |
@each $prop-val in $prop-val-list { | |
$property: nth($prop-val, 1); | |
$value: nth($prop-val, 2); | |
$focus-value: nth($prop-val, 5); | |
@if type-of($value) == 'color' { | |
@if type-of($focus-value) == 'number' and unit($focus-value) == '%' { | |
@if $focus-value < 0% { $focus-value: darken($value, $focus-value * -1); } | |
@else { $focus-value: lighten($value, $focus-value); } | |
} | |
} | |
#{$property}: $focus-value; | |
} | |
} | |
} | |
} |
Author
dalgard
commented
Feb 18, 2014
/*
Example:
a {
@include link-states(color, red, 5%, -10%); // Percentage: lighten/darken
}
Output:
a {
color: red;
}
a:hover, a:focus {
color: #ff1a1a; // Lighter
}
a:active {
color: #cc0000; // Darker
}
*/
/*
Example:
a {
@include link-states(
color background-color,
red blue,
null,
null yellow,
green
);
}
Output:
a {
color: red;
background-color: blue;
}
a:active {
background-color: yellow;
}
a:focus {
color: green;
background-color: green;
}
*/
It is easy to create more convenient mixins using rest syntax ("..."):
@mixin link-color($params...) {
@include link-states(color, $params...);
}
/*
Example:
a {
@include link-color(null, blue, brown);
}
Output:
a:hover, a:focus {
color: blue;
}
a:active {
color: brown;
}
*/
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment