LESS 变量自连接

Question

这个

.a {
  @a: 1;
  @b: 2;
  @concat: @a;
  @concat: ~"@{concat}@{b}";
  margin: @concat;
}

报错

Syntax error: too much recursion

然而，这

.a {
  @a: 1;
  @b: 2;
  @concat: e(`(function (a, b) {
    var concat = "" + a;
    concat += b;
    return concat;
  })(@{a}, @{b})`);
  margin: @concat;
}

会起作用。

是否有仅使用 LESS 将字符串与其自身连接的技巧（没有 concat1、concat2 等变量）？

请注意，上面的代码不是要简化的主题，因为它将使用条件。代码必须生成

.optional-conditional-class1, .optional-conditional-class2, .optional-conditional-class3 {
....
}

以 similar 循环方式。这就是为什么我想用类.

的列表形成连接的字符串

Answer 1

是的，本质上，这是可能的，尽管不在同一范围内。我最终采用了这样的递归方法

    .concat-test {
      .concat(@rest...) {
        ._concat(@i, @result, @rest...) {
          @var: extract(@rest, @i);
          .-() when (@i > length(@rest)) {
            @concat: @result;
          }
          .-() when (default()) {
            ._concat(@i+1, ~"@{result}@{var}", @rest);
          }
          .-();
        }
        ._concat(1, "", @rest);
      }

      @a:a;
      @b:b;
      @c:c;

      .concat(@a, @b, @c, @b, @a);
      concat: @concat;
    }

LESS 变量自连接

LESS variable self concatenation

javascript

css

less