css - LESS CSS - Mixin Arguments 和 Nth-Child - 没有循环

Question

我正在尝试编写一个与 id #p0x1 相关联的较少参数。我希望能够写一个像

@ytrans = translateY(@argument * 2) 

然后为每个 ID 提供该参数值。

#p0x1(@argument:3){@ytrans} 

但是，我无法使用 nth-child css 执行此操作。我只看到了用循环解决这个问题的解决方案。有没有更直接的方式来解决这个问题？

#p0x1 div:nth-child(1)(@argument:3){ 

---

这是我目前拥有的代码。

/*Cube Position 0,1*/

#p0x1 div:nth-child(1) {
  transform         : @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(2) {
  transform         : @top @zaxis @ytrans;  
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(3) {
  transform         : @back @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(4) {
  transform         : @bottom @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(5) {
    transform: @left @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(6)  {
    transform         : @right @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}

Answer 1

我终于能够在一个出色的个人名字7-phases-max的帮助下找到这个解决方案，他帮助我解决了我之前的问题。

---

我的解决方案

.coordinates(-2, 2);
     .coordinates(@min, @max) {
    .xcoor; .xcoor(@xcoor: @min) when (@xcoor <= @max) {
        .ycoor; .xcoor(@xcoor + 1);
    }
    .ycoor(@ycoor: @min) when (@ycoor <= @max) {
        @ytrans:translatey(@cubesize * @ycoor);
        @xtrans:translatex(@cubesize * @xcoor);
#p@{xcoor}x@{ycoor} div:nth-child(1) {
  transform: @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(2) {
  transform: @top @zaxis @ytrans @xtrans;   
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(3) {
  transform: @back @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(4) {
  transform: @bottom @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(5) {
    transform: @left @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(6)  {
    transform: @right @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
        .ycoor(@ycoor + 1);
    }
}

输出超过60,000行

这就是我喜欢 CSS 预处理器的原因。如果有人有改进建议，我会欢迎他们。