Skip to content

Instantly share code, notes, and snippets.

@tybruffy
Last active December 17, 2015 11:19
Show Gist options
  • Save tybruffy/5601896 to your computer and use it in GitHub Desktop.
Save tybruffy/5601896 to your computer and use it in GitHub Desktop.
LessCSS loop for adjacent sibling selectors.See Readme.markdown for usage

Less.js Loop for manipulating adjacent siblings. Defaults to add the style to all X number of siblings as specified in the call.

.testcase {
    .adjacents-content() {
    	display: inline;
	}
	.adjacents(4, ".item" );
}

Will output to

.testcase  + .item {
  display: inline;
}
.testcase  + .item + .item {
  display: inline;
}
.testcase  + .item + .item + .item {
  display: inline;
}
.testcase  + .item + .item + .item + .item {
  display: inline;
}

Alternately you can target just a specific sibling:

.testcase {
    .adjacents-content() {
        display: inline;
	}
	.adjacents(4, ".item", false );
}

Outputs

.testcase  + .item + .item + .item + .item {
  display: inline;
}
.adjacents( @count, @item: "", @all: true, @name: "" ) when (@all) {
@selector: ~"@{name} + @{item}";
.loop (@index) when (@index > 0) {
(@selector) {
.adjacents-content();
}
.adjacents(@index - 1, @item, true, @selector );
}
.loop (0) {}
.loop(@count);
}
.adjacents( @count, @item: "", @all: true, @name: "" ) when not (@all) {
@selector: ~"@{name} + @{item}";
.loop(@index) when(@index > 1) {
.adjacents(@index - 1, @item, false, @selector );
}
.loop (@index) when (@index = 1) {
(@selector) {
.adjacents-content();
}
.adjacents(@index - 1, @item, false, @selector );
}
.loop (0) {}
.loop(@count);
}
.adjacents(0);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment