Skip to content

Instantly share code, notes, and snippets.

@gerbenvandijk
Last active December 13, 2019 07:03
Show Gist options
  • Save gerbenvandijk/f1c75dab5b1ef10f980d to your computer and use it in GitHub Desktop.
Save gerbenvandijk/f1c75dab5b1ef10f980d to your computer and use it in GitHub Desktop.
Z-index mixin for LESS
@z-index-order: 'contact', 'lightbox', 'nav';
.zindex(@elementName) {
.loop(@elementName, @counter) when (@counter > 0) {
.loop(@elementName, @counter - 1);
.pickIndex(@elementName, @counter);
}
.loop(@elementName, length(@z-index-order));
.pickIndex(@elementName, @counter) when (extract(@z-index-order, @counter) = @elementName) {
z-index: @counter * 100;
}
}
// usage
nav {
.zindex('nav');
}
// output: nav{z-index:300}
@FezVrasta
Copy link

no reason to multiply by 100 the @counter, if you use this mixin you will never need to define a z-index manually.

Also, doing so, makes the illusion that you can rely on the gap between the z-indexes to insert an arbitrary z-index manually, but if you do so, when you'll add a new element to the @z-index-order, everything will break.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment