Skip to content

Instantly share code, notes, and snippets.

@pieplu
Last active August 29, 2015 14:01
Show Gist options
  • Save pieplu/9c6794de4cf1b592da5f to your computer and use it in GitHub Desktop.
Save pieplu/9c6794de4cf1b592da5f to your computer and use it in GitHub Desktop.
Loop sass for sprites
// for an image with all the stacked pictograms
$HeaderSelector: "name",
"other-name",
"other-name",
"other-name",
"other-name",
"other-name";
// Loop for sprite
$i:0;
$position-step:40;
@each $id in $HeaderSelector {
$selector : ".your-name-id-generique-#{$id}"; // same as an selector in an css file, $id is one name in $idHeaderSelector
$position : ($position-step * $i); // sprite steps begin at 0.
$i: $i + 1 !global; // !global, for new version of sass (3.3+)
#{$selector} {
background-position:0px -#{$position}px; //background position go to negative
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment