Question

我已经写出了我想在PHP中实现的内容，如下所示：

for($i=1; $i<13; $i++) {
    for($a=1; $a<13; $a++) {
        if(($a + $i) > 12) {
            echo ".col-xs-".$i." + .col-xs-".$a." { margin-top: 10px; }".PHP_EOL;
        }
    }
}

产生以下输出：

.col-xs-1 + .col-xs-12 { margin-top: 10px; }
.col-xs-2 + .col-xs-11 { margin-top: 10px; }
.col-xs-2 + .col-xs-12 { margin-top: 10px; }
.col-xs-3 + .col-xs-10 { margin-top: 10px; }
.col-xs-3 + .col-xs-11 { margin-top: 10px; }
.col-xs-3 + .col-xs-12 { margin-top: 10px; }
.col-xs-4 + .col-xs-9 { margin-top: 10px; }
.col-xs-4 + .col-xs-10 { margin-top: 10px; }
.col-xs-4 + .col-xs-11 { margin-top: 10px; }
.col-xs-4 + .col-xs-12 { margin-top: 10px; }
.col-xs-5 + .col-xs-8 { margin-top: 10px; }
.col-xs-5 + .col-xs-9 { margin-top: 10px; }
.col-xs-5 + .col-xs-10 { margin-top: 10px; }
.col-xs-5 + .col-xs-11 { margin-top: 10px; }
.col-xs-5 + .col-xs-12 { margin-top: 10px; }
.col-xs-6 + .col-xs-7 { margin-top: 10px; }
.col-xs-6 + .col-xs-8 { margin-top: 10px; }
.col-xs-6 + .col-xs-9 { margin-top: 10px; }
.col-xs-6 + .col-xs-10 { margin-top: 10px; }
.col-xs-6 + .col-xs-11 { margin-top: 10px; }
.col-xs-6 + .col-xs-12 { margin-top: 10px; }
.col-xs-7 + .col-xs-6 { margin-top: 10px; }
.col-xs-7 + .col-xs-7 { margin-top: 10px; }
.col-xs-7 + .col-xs-8 { margin-top: 10px; }
.col-xs-7 + .col-xs-9 { margin-top: 10px; }
.col-xs-7 + .col-xs-10 { margin-top: 10px; }
.col-xs-7 + .col-xs-11 { margin-top: 10px; }
.col-xs-7 + .col-xs-12 { margin-top: 10px; }
.col-xs-8 + .col-xs-5 { margin-top: 10px; }
.col-xs-8 + .col-xs-6 { margin-top: 10px; }
.col-xs-8 + .col-xs-7 { margin-top: 10px; }
.col-xs-8 + .col-xs-8 { margin-top: 10px; }
.col-xs-8 + .col-xs-9 { margin-top: 10px; }
.col-xs-8 + .col-xs-10 { margin-top: 10px; }
.col-xs-8 + .col-xs-11 { margin-top: 10px; }
.col-xs-8 + .col-xs-12 { margin-top: 10px; }
.col-xs-9 + .col-xs-4 { margin-top: 10px; }
.col-xs-9 + .col-xs-5 { margin-top: 10px; }
.col-xs-9 + .col-xs-6 { margin-top: 10px; }
.col-xs-9 + .col-xs-7 { margin-top: 10px; }
.col-xs-9 + .col-xs-8 { margin-top: 10px; }
.col-xs-9 + .col-xs-9 { margin-top: 10px; }
.col-xs-9 + .col-xs-10 { margin-top: 10px; }
.col-xs-9 + .col-xs-11 { margin-top: 10px; }
.col-xs-9 + .col-xs-12 { margin-top: 10px; }
.col-xs-10 + .col-xs-3 { margin-top: 10px; }
.col-xs-10 + .col-xs-4 { margin-top: 10px; }
.col-xs-10 + .col-xs-5 { margin-top: 10px; }
.col-xs-10 + .col-xs-6 { margin-top: 10px; }
.col-xs-10 + .col-xs-7 { margin-top: 10px; }
.col-xs-10 + .col-xs-8 { margin-top: 10px; }
.col-xs-10 + .col-xs-9 { margin-top: 10px; }
.col-xs-10 + .col-xs-10 { margin-top: 10px; }
.col-xs-10 + .col-xs-11 { margin-top: 10px; }
.col-xs-10 + .col-xs-12 { margin-top: 10px; }
.col-xs-11 + .col-xs-2 { margin-top: 10px; }
.col-xs-11 + .col-xs-3 { margin-top: 10px; }
.col-xs-11 + .col-xs-4 { margin-top: 10px; }
.col-xs-11 + .col-xs-5 { margin-top: 10px; }
.col-xs-11 + .col-xs-6 { margin-top: 10px; }
.col-xs-11 + .col-xs-7 { margin-top: 10px; }
.col-xs-11 + .col-xs-8 { margin-top: 10px; }
.col-xs-11 + .col-xs-9 { margin-top: 10px; }
.col-xs-11 + .col-xs-10 { margin-top: 10px; }
.col-xs-11 + .col-xs-11 { margin-top: 10px; }
.col-xs-11 + .col-xs-12 { margin-top: 10px; }
.col-xs-12 + .col-xs-1 { margin-top: 10px; }
.col-xs-12 + .col-xs-2 { margin-top: 10px; }
.col-xs-12 + .col-xs-3 { margin-top: 10px; }
.col-xs-12 + .col-xs-4 { margin-top: 10px; }
.col-xs-12 + .col-xs-5 { margin-top: 10px; }
.col-xs-12 + .col-xs-6 { margin-top: 10px; }
.col-xs-12 + .col-xs-7 { margin-top: 10px; }
.col-xs-12 + .col-xs-8 { margin-top: 10px; }
.col-xs-12 + .col-xs-9 { margin-top: 10px; }
.col-xs-12 + .col-xs-10 { margin-top: 10px; }
.col-xs-12 + .col-xs-11 { margin-top: 10px; }
.col-xs-12 + .col-xs-12 { margin-top: 10px; }

不是将此输出复制并粘贴到我的较少文件中，而是宁愿少做相同的逻辑，以便它更干净但我所拥有的不起作用。这是我的代码：

.generate-columns(13);

.generate-columns(@n, @i: 1) when (@i =< @n) {

    .generate-columns2(@m, @l: 1) when (@l =< @m) {
        when (@i + @l > 12) {
            .col-xs-@{i} + .col-xs-@{l} {
                margin-top: 10px;
            }
        }

        .generate-columns2(@m, (@l + 1));
    }

    .generate-columns(@n, (@i + 1));
}

我得到的错误是在尝试编译less时：

>> ParseError: Unrecognised input in assets\less\utility.less on line 77, column 33:
>> 76         .generate-columns2(@m, @l: 1) when (@l =< @m) {
>> 77             when (@i + @l > 12) {
>> 78                 .col-xs-@{i} + .col-xs-@{l} {

有谁知道这是什么问题？

Answer 1

正如Harry指出的那样，我在&之前错过了when并且没有在任何地方调用内部mixin。解决方案是：

.generate-columns(13);

.generate-columns(@n, @i: 1) when (@i =< @n) {

    .generate-columns2(13);

    .generate-columns2(@m, @l: 1) when (@l =< @m) {
        &when (@i + @l > 12) {
            .col-xs-@{i} + .col-xs-@{l} {
                margin-top: 10px;
            }
        }

        .generate-columns2(@m, (@l + 1));
    }

    .generate-columns(@n, (@i + 1));
}

在LESS中使用for循环和if语句

1 个答案: