We've implemented a CSS style that incorporates dots both before and after a heading to signify the nesting level of the heading:
.heading.nesting-1:before,.heading.nesting-1:after{content:"\00B7"}
.heading.nesting-2:before,.heading.nesting-2:after{content:"\00B7\00B7"}
.heading.nesting-3:before,.heading.nesting-3:after{content:"\00B7\00B7\00B7"}
...
Although I attempted using LESS for concatenating strings, the results were not as expected.
@entity-dot: '\00B7';
@nesting-levels: 9;
.heading {
.nesting-loop (@i) when (@i <= @nesting-levels) {
&.nesting-@{i} {
&:before, &:after {
.nested-dots(@j, @current: "") when (@j > 0) {
@nested-dots: "@{current}@{entity-dot}";
.nested-dots((@j - 1), @nested-dots);
}
.nested-dots(@j: @i, "");
content: "@{nested-dots}";
}
}
.nesting-loop(@i + 1);
}
.nesting-loop (1);
}
The output now appears as follows:
.heading.nesting-1:before,.heading.nesting-1:after{content:"\00B7"}
.heading.nesting-2:before,.heading.nesting-2:after{content:"\00B7"}
.heading.nesting-3:before,.heading.nesting-3:after{content:&q
t;\00B7"}
...
It seems like the issue stems from the inability to iteratively update the @nested-dots property in this manner. Any suggestions for a solution would be greatly appreciated!
Thank you for your assistance.