【问题标题】:LESS - Create ID by looping through two variablesLESS - 通过循环两个变量创建 ID
【发布时间】:2015-04-25 04:36:34
【问题描述】:

我正在尝试创建一个循环,输出坐标 -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;
}

【问题讨论】:

    标签: css loops variables less


    【解决方案1】:

    有办法做到这一点,而无需任何循环:

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

    尽管对于任意值列表,嵌套循环当然是最简单的解决方案(参见example),例如(在“纯少”中)类似:

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

    【讨论】:

    • less.curious?是否有将其添加到较少处理器的安装文档?
    • @Joseph 这只是少了约 20 行 file 你可以下载和导入(它不是一个真正的库,只是一个公共域 sn-p 你可以使用任何你想要的方式)。
    • 抱歉,我正在努力理解这一点,所以最后一个问题来自我。继续花括号,为什么要创建一个没有任何语句的 mixin(例如 - .i; // .j;)?这就像设置一个空变量吗?
    • @Joseph .i 只是 .i(); 的简写 - 即它是一个 mixin 调用而不是一个 mixin 定义(在这种情况下,.i; 是真正开始循环的地方)。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-11
    • 2021-12-30
    • 1970-01-01
    • 2020-04-30
    • 2020-07-14
    • 1970-01-01
    相关资源
    最近更新 更多