LESS CSS - 混合参数和 Nth-Child - 没有循环

Question

我正在尝试编写一个与 ID #p0x1 关联的 less 参数。我希望能够写一个像

这样的论点

@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

我终于在一个出色的个人名字的帮助下找到了这个解决方案 seven-phases-max who helped me with my 。

我的解决方案

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

Output of more than 60,000 lines

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

LESS CSS - 混合参数和 Nth-Child - 没有循环

LESS CSS - Mixin Arguments and Nth-Child - without looping

css

arguments

css-selectors

less

less-mixins

我的解决方案