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 hidden or 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 
      
    
  
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