.less loop (recursive, array, extract, variable, escape, length, mixin)

loop.less

// This is an example of how an array can be created and a recursive mixin used to generate complex css.
@platforms: "ios", "android", "windows", "amazon", "roku", "xbox", "xbox_one", "chrome";

.loopPlatforms(@i) when (@i > 0) {
	@name: extract(@platforms, @i);
	@id: ~"#@{name}";
	
	a[href="@{id}"] {
		background-image: url("/Content/images/apps/@{name}_off.png");
	}
	
	&.ui-state-active a[href="@{id}"], a[href="@{id}"]:hover {
		background-image: url("/Content/images/apps/@{name}_on.png");
	}
	
	.loopPlatforms(@i - 1);
}

.loopPlatforms(length(@platforms));