anavdesign
4/22/2016 - 3:40 AM

SASS: Icon List Retina Sprite Loop

SASS: Icon List Retina Sprite Loop

/*
 * 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);
		}
	}
}