Question

我想创建一个低于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>

带有容器和classx20的div应该有margin: 200px

那么什么不好？ TY。

Answer 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，而不是尝试用负值否定它。

Answer 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

减少循环mixin的增量clases

2 个答案: