Skip to content

Instantly share code, notes, and snippets.

@derekblank
Created February 9, 2014 17:36
Show Gist options
  • Save derekblank/8902657 to your computer and use it in GitHub Desktop.
Save derekblank/8902657 to your computer and use it in GitHub Desktop.
Multi-dimensional each loop in Scss
// Irregular Sprite List
// The following icons have varying dimensions
// Key: icon-name background-position-x, background-position-y, absolute-position-x, absolute-position-y, width, height
$irregular-list:
dashboard -69px 0 45px 29px 46px 45px,
download -23px -121px 0 6px 33px 26px,
head-double -69px -123px 40px 34px 58px 36px,
head-stats -69px -46px 44px 31px 55px 39px,
head-with-tie -69px -85px 45px 34px 44px 37px,
image 0 -120px 0 0 20px 27px,
newsletter -23px -100px 0 0 45px 20px;
@each $icon in $irregular-list {
.icon-#{nth($icon, 1)} {
position: relative;
&:before {
background: image-url('icons/icons-sprite.png') no-repeat;
background-position: #{nth($icon, 2)} #{nth($icon, 3)};
content: '';
left: #{nth($icon, 4)};
height: #{nth($icon, 7)};
position: absolute;
top: #{nth($icon, 5)};
width: #{nth($icon, 6)};
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment