| <div id="without"></div> | |
| <div id="with"></div> |
A quick demo showing a mathematical operation being applied to each item in a space-separated list. Not elegant, but it works - please offer suggestions if I've missed a more obvious way to do this.
UPDATED 15/11/13 Output a properly indexed list, rather than a length(2) list consisting of a long string and the final value. Sass lists are yucky.
A Pen by Riley Shaw on CodePen.
| @import "compass" | |
| @import compass/layout/ | |
| $test-list: 100px 100px 100px 100px | |
| //////// This is where the money is //////// | |
| @function scale-list($list, $factor) | |
| $first-item: nth($list, 1) | |
| $blank: $first-item * $factor | |
| @each $i in reject($list, $first-item) | |
| $blank: append($blank, $i*$factor) | |
| @return $blank | |
| //////////////////////////////////////////// | |
| div | |
| &#with | |
| padding: scale-list($test-list, .5) | |
| background-color: #f0f | |
| &#without | |
| padding: $test-list | |
| background-color: #303 | |
| position: fixed | |
| body | |
| +baseline-grid-background(25px, #aaa) |