Guest User

Untitled

a guest
Nov 18th, 2017
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.86 KB | None | 0 0
  1. $a: #ff6600;
  2. $b: #eb5e00;
  3.  
  4. // Ever wanted to know what would be the color operations to apply to a color
  5. // in order to find a second color, just out of curiosity?
  6. // Like, "how to programmatically go from #BADA55 to #B0BCA7"?
  7. // --------------------------------------------------------------------------------
  8. // @param (color) $a: first color
  9. // @param (color) $b: second color
  10. // --------------------------------------------------------------------------------
  11. // @return (map) returns the color operations to do in order to find $b from $a
  12. // where keys are the color functions to apply
  13. // and values are the values to pass to these functions
  14.  
  15. @function color-diff($a, $b) {
  16. $sat: saturation($a) - saturation($b);
  17. $lig: lightness($a) - lightness($b);
  18. $fn-sat: if($sat > 0, 'desaturate', 'saturate');
  19. $fn-lig: if($lig > 0, 'darken', 'lighten');
  20.  
  21. @return (
  22. adjust-hue: -(hue($a) - hue($b)),
  23. #{$fn-sat}: abs($sat),
  24. #{$fn-lig}: abs($lig)
  25. );
  26. }
  27.  
  28. // Apply differences returned from `color-diff` function to a color
  29. // In order to retrieve the second color
  30. // --------------------------------------------------------------------------------
  31. // @param (color) $color: color to transform
  32. // @param (map) $diff: diff map
  33. // --------------------------------------------------------------------------------
  34. // @return (color) transformed color
  35.  
  36. @function apply-diff($color, $diff) {
  37. // We call the $key (function),
  38. // passing the $color and the $value as parameters
  39. // e.g. `call(adjust-hue, #BADA55, 42)`
  40. @each $key, $value in $diff {
  41. $color: call($key, $color, $value);
  42. }
  43. @return $color;
  44. }
  45.  
  46. // Calculate the diff map between those 2
  47. $diff: color-diff($a, $b);
  48. @debug($diff);
  49.  
  50. // Apply the diff to one of the two colors to find the second one
  51. $c: apply-diff($a, $diff);
  52.  
  53. // Is everything okay?
  54. sass {
  55. a: $a;
  56. b: $b;
  57. c: $c; // $b == $c, awesome!
  58. }
Add Comment
Please, Sign In to add comment