Jump from x to y in z steps. I created this to automate color picking during a MasterCard hackathon. Cleaned it up later, I hope it's useful!
Usage: include function "bound" and mixin "color-steps"
+color-steps($steps, $color1, $color2)
A Pen by Riley Shaw on CodePen.
| - for i in 1..3 do | |
| div.out | |
| - for i in 1..8 do | |
| div |
| @import "compass" | |
| @function rgb-bind($num) | |
| @return min(max($num, 0), 255) | |
| =color-steps($steps, $color1, $color2: #fff) | |
| $or: red($color1) | |
| $og: green($color1) | |
| $ob: blue($color1) | |
| $dr: $or - red($color2) | |
| $dg: $og - green($color2) | |
| $db: $ob - blue($color2) | |
| @for $i from 0 to $steps | |
| div:nth-child(#{$i + 1}) | |
| $r: rgb-bind($or - $dr*$i/($steps - 1)) | |
| $g: rgb-bind($og - $dg*$i/($steps - 1)) | |
| $b: rgb-bind($ob - $db*$i/($steps - 1)) | |
| background-color: rgb($r, $g, $b) | |
| body | |
| margin: 0 | |
| div.out | |
| float: left | |
| width: 33.3333333333333% | |
| box-sizing: border-box | |
| padding: 3.3333333333333% | |
| &:nth-child(1) | |
| +color-steps(8, #88aadd, #7d18b0) | |
| &:nth-child(2) | |
| +color-steps(8, #ff0000, #ff9000) | |
| &:nth-child(3) | |
| +color-steps(8, #88ddaa, #eefaf2) | |
| div | |
| width: 100% | |
| height: 54px |