a bit buggy on the key listeners, very evident they are listening to a key up event and replacing the text value so i cant use the left and right arrow keys <- -> to move on the text field
Very cool! This makes me think that an editor plugin for visualizing these functions would be very nice. Something like what dabblet.com does for colors (display a 'tooltip' previewing the color next to its definition), but which recognizes the SASS color functions.
You're right - we have a subtle math bug (JavaScript not known for its math precision..) SASS takes colors out to three decimal places, which we weren't. Will be pushing the fix to both GitHub and the live site shortly, along with some rendering fixes for IE8/9.
Can someone who advocates utilizing these color functions have any intuitive use cases for them? As a less user who tends to forget their existence, this demo has really only reaffirmed my original belief that statements are far more longwinded than necessary and tools like this must be employed to predict output. Nothing against the tool, it does exactly what it's supposed to, I'm just trying to learn a reason to use it...
Can someone who advocates utilizing these color functions have any intuitive use cases for them? As a less user who tends to forget their existence, this demo has really only reaffirmed my original belief that statements are far more longwinded than necessary and tools like this must be employed to predict output. Nothing against the tool, it does exactly what it's supposed to, I'm just trying to learn a reason to use it...
I sometimes use these functions when rapidly prototyping. I can store one or more base colors, and then calculate other shades of colors relative to the base. This makes changing the site's color scheme a matter of changing just the base color(s).
Of course, once I've settled on final colors, I may go in and tweak all of the shades with exact values.
I use them pretty frequently. In combination with variables for colors, they can be pretty useful, since you can make sweeping changes to the appearance of a site by changing a single line of code.
I usually use three color variables ($background, $foreground, $highlight) every time I start a website and expand sparingly from there. If I wanted my headers to have an indented appearance, I can use a text shadow 1px above the text with `darken($background, 10%)` to choose an appropriate color for the imprint without having to manually keep them in sync. Similarly, if I'm ever working with gradients, say on an alert bar that spans the top of the screen, I can simply use `linear-gradient(top, lighten($highlight, 5%), darken($highlight, 5%))`.
If you'd like an example of a website built this way, we completed enyojs.com in about two weeks thanks entirely to SASS and in part to color variables and functions.
As ever, your mileage may vary and what works wonders for me may not fit your style of design.
15 comments
[ 2.8 ms ] story [ 48.5 ms ] threadhttp://lab.arc90.com/2012/09/18/sassme
http://blog.arc90.com/2012/09/18/announcing-sassme
1. darken 10: #c09f62 (light brown)
2. saturate 57 (max): #ffd68a, a light, slightly golden yellow
3. adjust_hue 302: #deabbb, virtually the same color.
1. darken(#deadbe, 20) => #c16484
2. saturate(#deadbe, 57) => #ff8cb4
3. adjust_hue(#deadbe, 302) => #cfadde
All of these are much more reasonable results for these functions.
[1]: http://sass-lang.com/try.html
Saturate/Desaturation does the same for the S (saturation) value in the HSL representation of the color.
Adjust_Hue moves the hue of the color (H in HSL) around a 360 degree color wheel. (from 0 - 360)
https://en.wikipedia.org/wiki/HSL_and_HSV
If you look at how SASS handles colors under the hood, then yeah, that's how it does it.
(I was writing it when you replied.
Updated: fixed on GitHub - https://github.com/arc90/sass-color-picker/commit/4b2fc4fcad...
Of course, once I've settled on final colors, I may go in and tweak all of the shades with exact values.
I usually use three color variables ($background, $foreground, $highlight) every time I start a website and expand sparingly from there. If I wanted my headers to have an indented appearance, I can use a text shadow 1px above the text with `darken($background, 10%)` to choose an appropriate color for the imprint without having to manually keep them in sync. Similarly, if I'm ever working with gradients, say on an alert bar that spans the top of the screen, I can simply use `linear-gradient(top, lighten($highlight, 5%), darken($highlight, 5%))`.
If you'd like an example of a website built this way, we completed enyojs.com in about two weeks thanks entirely to SASS and in part to color variables and functions.
As ever, your mileage may vary and what works wonders for me may not fit your style of design.