Created
February 18, 2014 04:38
-
-
Save kazu69/9064719 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com. http://thesassway.com/advanced/how-to-programtically-go-from-one-color-to-another-in-sass
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.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; | |
} | |
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
.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