Skip to content

Instantly share code, notes, and snippets.

@coderfin
Created February 18, 2016 18:51
Show Gist options
  • Save coderfin/28ad04ecfed07afe6722 to your computer and use it in GitHub Desktop.
Save coderfin/28ad04ecfed07afe6722 to your computer and use it in GitHub Desktop.
.less loop (recursive, array, extract, variable, escape, length, mixin)
// 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));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment