| <button>Submit</button> |
People
 :bowtie: |
😄 :smile: |
😆 :laughing: |
|---|---|---|
😊 :blush: |
😃 :smiley: |
:relaxed: |
😏 :smirk: |
😍 :heart_eyes: |
😘 :kissing_heart: |
😚 :kissing_closed_eyes: |
😳 :flushed: |
😌 :relieved: |
😆 :satisfied: |
😁 :grin: |
😉 :wink: |
😜 :stuck_out_tongue_winking_eye: |
😝 :stuck_out_tongue_closed_eyes: |
😀 :grinning: |
😗 :kissing: |
😙 :kissing_smiling_eyes: |
😛 :stuck_out_tongue: |
Pure SASS-adaption of Lea Verou's contrast-ratio javascript. Can be useful when eg. generating colored buttons from a single supplied color as you can then check which out of a couple of text colors would give the best contrast.
This script currently lacks the support for alpha-transparency that Lea supports in her script though.
In addition to the color-contrast adaption there's also some math methods that were needed to be able to calculate the exponent of a number and especially so when the exponent is a decimal number. A 2.4 exponent is used to calculate the luminance of a color and calculating such a thing is not something that SASS supports out of the box and not something I found a good pure-SASS script for calculating and I much prefer pure-SASS over ruby extensions. The math methods might perhaps be unecessary though if you're running Compass or similar as they may provide compatible math methods themselves.
Normal usage: `color: pick_best_color(#f00
| // from http://www.w3.org/TR/WCAG20/#relativeluminancedef | |
| function relativeLuminanceW3C(R8bit, G8bit, B8bit) { | |
| var RsRGB = R8bit/255; | |
| var GsRGB = G8bit/255; | |
| var BsRGB = B8bit/255; | |
| var R = (RsRGB <= 0.03928) ? RsRGB/12.92 : Math.pow((RsRGB+0.055)/1.055, 2.4); | |
| var G = (GsRGB <= 0.03928) ? GsRGB/12.92 : Math.pow((GsRGB+0.055)/1.055, 2.4); | |
| var B = (BsRGB <= 0.03928) ? BsRGB/12.92 : Math.pow((BsRGB+0.055)/1.055, 2.4); |
| <!-- For Mixin and usage see: http://chipcullen.com/useful-sass-mixin-prop-query/ --> | |
| <snippet> | |
| <content><![CDATA[ | |
| @include prop-query($1, $2, $3); | |
| $4 | |
| ]]></content> | |
| <tabTrigger>pq</tabTrigger> | |
| <scope>source.css, source.scss, source.sass</scope> | |
| </snippet> |
| { | |
| "AL": "Alabama", | |
| "AK": "Alaska", | |
| "AS": "American Samoa", | |
| "AZ": "Arizona", | |
| "AR": "Arkansas", | |
| "CA": "California", | |
| "CO": "Colorado", | |
| "CT": "Connecticut", | |
| "DE": "Delaware", |