Skip to content

Instantly share code, notes, and snippets.

@kazu69
Created February 18, 2014 04:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kazu69/9064719 to your computer and use it in GitHub Desktop.
Save kazu69/9064719 to your computer and use it in GitHub Desktop.
// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----
@function color-diff($color-a, $color-b) {
$hue: hue($color-a) - hue($color-b);
$saturation: saturation($color-a) - saturation($color-b);
$lightness: lightness($color-a) - lightness($color-b);
$function-hue: 'adjust-hue';
$function-saturation: if($saturation > 0, 'desaturate', 'saturate');
$function-lightness: if($lightness > 0, 'darken', 'lighten');
@return (
#{$function-hue}: -($hue),
#{$function-saturation}: abs($saturation),
#{$function-lightness}: abs($lightness),
);
}
@function apply-color-diff($color, $diff) {
@each $key, $value in $diff {
$color: call($key, $color, $value);
}
@return $color;
}
$color-a: #BADA55;
$color-b: #B0BCA7;
$diff: color-diff($color-a, $color-b);
$c: apply-color-diff($color-a, $diff);
.adjust-hue{
content: nth($diff, 1);
}
.desaturate{
content: nth($diff, 2);
}
.lighten{
content: nth($diff, 3);
}
.c{
content: $c;
}
.adjust-hue {
content: adjust-hue 19.84962deg;
}
.desaturate {
content: desaturate 50.70282%;
}
.lighten {
content: lighten 10.19608%;
}
.c {
content: #b0bca7;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment