Created
February 9, 2014 17:36
-
-
Save derekblank/8902657 to your computer and use it in GitHub Desktop.
Multi-dimensional each loop in Scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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