scss SASS:图标列表Retina Sprite Loop

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss SASS:图标列表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);
		}
	}
}

以上是关于scss SASS:图标列表Retina Sprite Loop的主要内容,如果未能解决你的问题,请参考以下文章

scss Sass列表

scss 根据SASS列表的索引删除了SASS列表的项目(模仿原生map-remove函数的行为)

scss SASS变量列表,用于帮助管理数字CSS字体粗细值。

scss 用于SCSS的Retina Mixin

scss _retina.scss

scss _retina.scss