/*
* Icon List Sprite Loop
*
* Ussage:
* 1. create a folder in your image directory (in this case 'icons').
* 2. create sprite images for pixel ratio 1 screens and put them in the folder.
* 4. create sprite images for pixel ratio 2 screens and put them in the folder,
* use the same filenames with a '-2x' suffix.
* 5. define the image directory in plugins/_retina-sprites.scss
* uncomment line 16
* 6. create an unordered list.
* add a class name of .icon-list to th ul
* 7. add class names to each li that match the image names.
* 8. add each class name to the $iconList variable.
*
*/
.icon-list {
@extend %listUnstyled;
@extend %listHorizontalCenter;
a {
@extend %block;
@extend %hideText;
}
$iconList: "name1", "name2", "name3";
@each $iconCurrent in $iconList {
$i: index($iconList, $iconCurrent);
[class=#{$iconCurrent}] a {
@include use-sprite($iconCurrent, true);
}
}
}