LESS - 通过循环两个变量来创建ID

时间:2015-04-24 19:54:15

标签: css loops variables less

我正在尝试创建一个循环,输出坐标-2,-2到2,2之间的所有可能组合。有没有办法在不创建多个循环的情况下执行此操作?

期望输出

#p1x0,#p2x0,#p-1x0,#p-2x0,#p1x1,#p-1x-1,#p-1x1,#p1x-1,#p2x2,#p-2x-2,p2x-2,p-2x2,#p2x1,#p2x-1,#p1x2,#p1x-2,#p-2x1,#p-2x-1,#p-1x2,#p-1x-2,#p0x-1,#p0x-2,#p0x0,#p0x1,#p0x2{}

当前尝试

#cube-side {
border:red;
}

.create-cubes(@n, @i: -2, @z: -2, @side-sum:@i + @z) when (@side-sum =< @n) {
    & when (@i < @z) {
        .create-cubes(@n, @i+1);
    }
    & when (@z < @i) {
        .create-cubes(@n, @z+1);
    }
    #p@{i}x@{z}:extend(#cube-side) {}
}

.create-cubes(4);

输出

#cube-side,
#p-2x-2 {
  border: red;
}

1 个答案:

答案 0 :(得分:1)

没有任何循环可以做到这一点:

#cube-side {
    border: red;
}

-2, -1, 0, 1, 2 {
    #p&x&:extend(#cube-side) {}
}

虽然对于任意值列表而言,嵌套循环当然是最简单的解决方案(参见example),例如(&#34; pure Less&#34;)类似于:

.create-cubes(-2, 2);
.create-cubes(@min, @max) {
    .i; .i(@i: @min) when (@i <= @max) {
        .j; .i(@i + 1);
    }
    .j(@j: @min) when (@j <= @max) {
        #p@{i}x@{j}:extend(#cube-side) {}
        .j(@j + 1);
    }
}