Question

我有以下循环为标签云生成一些样式。在网上生成器它产生我认为正确的CSS样式，但在视觉工作室解决方案（2012）自动生成css它似乎挂起。（见下文）越少。有没有更合适的方法来制作这样的东西，通过更少的东西不会混淆VS .less发生器？

       @iterations: 10;
        @maxSize: 40;
        @minSize: 10;

        .tag-loop (@i) when (@i > -1) {
            @j:  (@i*(30/@iterations) + @minSize);
            li.tag-@{i} {
                font-size:~"@{j}px";

            }
            .tag-loop(@i - 1);
        }
        .tag-loop (@iterations);

通过visual studio制作：

ul.tag-cloud li.tag-10 {
  font-size: 10px;
}
ul.tag-cloud li.tag-9 {
  font-size: 10px;
}
ul.tag-cloud li.tag-8 {
  font-size: 10px;
}
ul.tag-cloud li.tag-7 {
  font-size: 10px;
}
ul.tag-cloud li.tag-6 {
  font-size: 10px;
}
ul.tag-cloud li.tag-5 {
  font-size: 10px;
}
ul.tag-cloud li.tag-4 {
  font-size: 10px;
}
ul.tag-cloud li.tag-3 {
  font-size: 10px;
}
ul.tag-cloud li.tag-2 {
  font-size: 10px;
}
ul.tag-cloud li.tag-1 {
  font-size: 10px;
}
ul.tag-cloud li.tag-0 {
  font-size: 10px;
}

如果我使用类似http://winless.org/online-less-compiler的内容，则会更准确地生成以下内容：

li.tag-10 {
  font-size: 40px;
}
li.tag-9 {
  font-size: 37px;
}
li.tag-8 {
  font-size: 34px;
}
li.tag-7 {
  font-size: 31px;
}
li.tag-6 {
  font-size: 28px;
}
li.tag-5 {
  font-size: 25px;
}
li.tag-4 {
  font-size: 22px;
}
li.tag-3 {
  font-size: 19px;
}
li.tag-2 {
  font-size: 16px;
}
li.tag-1 {
  font-size: 13px;
}
li.tag-0 {
  font-size: 10px;
}

Answer 1

看起来你的VS使用（通过Web Essentials 2012？）相当过时的Less 1.3.3处理变量范围的方式完全不同，即在上一次迭代中定义的@j会覆盖所有以前的@j定义。解决方法是直接计算字体大小值：

    @iterations: 10;
    @maxSize: 40;
    @minSize: 10;

    .tag-loop (@i) when (@i > -1) {
        li.tag-@{i} {
            font-size: unit((@i * (30 / @iterations) + @minSize), px);
        }
        .tag-loop((@i - 1));
    }
    .tag-loop (@iterations);

循环增量变量

1 个答案: