Created
January 28, 2014 14:51
-
-
Save KittyGiraudel/8668994 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
// ---- | |
// Sass (v3.3.0.rc.2) | |
// Compass (v1.0.0.alpha.17) | |
// ---- | |
// Ever wanted to know what would be the color operations to apply to a color | |
// in order to find a second color, just out of curiosity? | |
// Like, "how to programmatically go from #BADA55 to #B0BCA7"? | |
// -------------------------------------------------------------------------------- | |
// @param (color) $a: first color | |
// @param (color) $b: second color | |
// -------------------------------------------------------------------------------- | |
// @return (map) returns the color operations to do in order to find $b from $a | |
// where keys are the color functions to apply | |
// and values are the values to pass to these functions | |
@function color-diff($a, $b) { | |
$sat: saturation($a) - saturation($b); | |
$lig: lightness($a) - lightness($b); | |
$fn-sat: if($sat > 0, 'desaturate', 'saturate'); | |
$fn-lig: if($lig > 0, 'darken', 'lighten'); | |
@return ( | |
adjust-hue: -(hue($a) - hue($b)), | |
#{$fn-sat}: abs($sat), | |
#{$fn-lig}: abs($lig) | |
); | |
} | |
// Apply differences returned from `color-diff` function to a color | |
// In order to retrieve the second color | |
// -------------------------------------------------------------------------------- | |
// @param (color) $color: color to transform | |
// @param (map) $diff: diff map | |
// -------------------------------------------------------------------------------- | |
// @return (color) transformed color | |
@function apply-diff($color, $diff) { | |
// We call the $key (function), | |
// passing the $color and the $value as parameters | |
// e.g. `call(adjust-hue, #BADA55, 42)` | |
@each $key, $value in $diff { | |
$color: call($key, $color, $value); | |
} | |
@return $color; | |
} | |
// -------------------------------------------------------------------------------- | |
// Example | |
// -------------------------------------------------------------------------------- | |
// Pick two random colors | |
$a: #BADA55; | |
$b: #B0BCA7; | |
// Calculate the diff map between those 2 | |
$diff: color-diff($a, $b); | |
// This is a map looking like this: | |
// $diff: ( | |
// adjust-hue: 42, | |
// saturation: 13.37%, | |
// lightness: 1.5% | |
// ); | |
// Apply the diff to one of the two colors to find the second one | |
$c: apply-diff($a, $diff); | |
// Is everything okay? | |
sass { | |
a: $a; | |
b: $b; | |
c: $c; // $b == $c, awesome! | |
} | |
// Visual representation if you prefer | |
// left part is $a | |
// middle part is $b | |
// third part is $c, generated from $a | |
html { | |
background: -webkit-linear-gradient(left, $a 33%, $b 33%, $b 66%, $c 66%); | |
height: 100%; | |
} |
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
sass { | |
a: #bada55; | |
b: #b0bca7; | |
c: #b0bca7; | |
} | |
html { | |
background: -webkit-linear-gradient(left, #bada55 33%, #b0bca7 33%, #b0bca7 66%, #b0bca7 66%); | |
height: 100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment