在LESS循环中生成CSS内容的值

问题描述

我们有一种CSS样式，可以在标题之前和之后添加点，以指示标题的嵌套级别：

.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"}
...

我尝试了以下LESS，但无法正确连接字符串

@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);
}

结果是：

.heading.nesting-1:before,.heading.nesting-2:after{content:"\00B7"}
.heading.nesting-3:before,.heading.nesting-3:after{content:"\00B7"}
...

我想我知道问题在于属性@nested-dots无法以这种方式迭代更新，但是我想知道是否有人有解决方案？

感谢您的帮助。

解决方法

这就是我在这篇文章的帮助下解决的方法 (thank you Martin Turjak)

@nesting-levels: 5;
@entity-space: '\00A0';
@entity-dot: '\00B7';

.content-dots (@numdots) {

    //Mixin output
    .nested-dots(1,@dots1) {
        @dots: "@{dots1}@{entity-dot}";
    }

    //Mixin iterator
    .nested-dots(@index,@dots1) when (@index > 1) {
        @dots2: "@{dots1}@{entity-dot}@{entity-space}";
        .nested-dots((@index - 1),@dots2);
    }

    //Call mixin
    .nested-dots(@numdots,"");

    //Output dots
    content: "@{dots}";
}

.heading {
    .nesting-loop (@i) when (@i >= 1) {
        &.nesting-@{i} {
            &:before,&:after  {
                .content-dots(@i);
            }
        }
        .nesting-loop (@i - 1);
    }
    .nesting-loop (@nesting-levels);
}

结果是

.heading.nesting-5:before,.heading.nesting-5:after{content:"\00B7\00A0\00B7\00A0\00B7\00A0\00B7\00A0\00B7"}
.heading.nesting-4:before,.heading.nesting-4:after{content:"\00B7\00A0\00B7\00A0\00B7\00A0\00B7"}
.heading.nesting-3:before,.heading.nesting-3:after{content:"\00B7\00A0\00B7\00A0\00B7"}
.heading.nesting-2:before,.heading.nesting-2:after{content:"\00B7\00A0\00B7"}
.heading.nesting-1:before,.heading.nesting-1:after{content:"\00B7"}