用于增量类的更少循环混合答案

【问题标题】：Less loop mixin for incremental clases用于增量类的更少循环混合
【发布时间】：2013-12-09 23:55:51
【问题描述】：

我想在小于 1.5 的版本中创建一个 mixin 来替换当前的 css。

    .classx1{margin:10px;}
    .classx2{margin:20px;}
    .classx3{margin:30px;}
    .classx4{margin:40px;}
    .classx5{margin:50px;}
     ...
    .classx30{margin:300px;}

已经试过了，但还是不行：

@iterations: 30;
.loopingClass (@index) when (@index > 0) {
    classx@{index} {
        margin: -@index px;
    }
    .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@iterations);

在 html 中我添加了类：

<div class="container classx20">CONTENT</div>

带有类 container 和 classx20 的 div 应该有 margin: 200px

那么什么不好呢？太棒了。

【问题讨论】：

试试(~".classx@{index}") {
@BeatAlex 从 1.4 版本开始，这个 "(~".classx@{index}")" 不起作用，据我所知在 "classx@{index}" 中发生了变化。

标签： html css less

【解决方案1】：

你的计算对于你所说的输出应该是没有意义的。这将提供您想要的输出：

@iterations: 30;
.loopingClass (@index) when (@index > 0) {
    .classx@{index} { //Added dot here to make it a class
        margin: unit(@index * 10, px); //KEY CHANGE HERE
    }
    .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@iterations);

如果.classx20 应该是margin: 200px，那么您需要将索引乘以10，而不是试图用负值来否定它。

【讨论】：

【解决方案2】：

您的代码中有两个错误

1) classx前缺少点

2) 边距值和px之间的空格

classx@{index} {
        margin: -@index px;
}

所以 CSS 结果如下所示：

classx30 {
  margin: -30 px;
}
classx29 {
  margin: -29 px;
}
classx28 {
  margin: -28 px;
}
...

转义字符串的正确方法：

@iterations: 30;
.loopingClass (@index) when (@index > 0) {
  .classx@{index} {
    margin: ~"@{index}px";
  }
  .loopingClass(@index - 1);
}
.loopingClass (0) {}
.loopingClass (@iterations);

Working example

More info on lesscss.org

【讨论】：

:)) 很好，但是在我的项目中仍然无法正常工作，但是这是正确的答案，所以我应该检查我的项目中出了什么问题。我正在使用引导程序，但我认为这没有任何干扰。 ty