Skip to content

Instantly share code, notes, and snippets.

@rileyjshaw
Created September 1, 2013 08:27
Show Gist options
  • Save rileyjshaw/6403087 to your computer and use it in GitHub Desktop.
Save rileyjshaw/6403087 to your computer and use it in GitHub Desktop.
A Pen by Riley Shaw.
<div id="without"></div>
<div id="with"></div>

Sass list operation

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.

License.

@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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment