LESS 变量自连接答案

【问题标题】：LESS variable self concatenationLESS 变量自连接
【发布时间】：2015-05-23 03:29:10
【问题描述】：

这个

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

给出一个错误。

语法错误：递归过多

但是，这个

.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 循环方式。这就是为什么我想用类列表形成连接字符串。

【问题讨论】：

Less 是一种声明性语言，因此它的变量不能用于修改自身。你想解决什么任务（看起来像XY Problem）？
if (aCondition) { concat += a }; if (bCondition) { concat += b }; 这是简化的 js 伪代码。使用 LESS 可以轻松完成，除了......嗯，递归的事情。
当然，我更新了问题。希望它能解释一些东西。
对于您的编辑，请参阅例如stackoverflow.com/questions/25306437（不要错过我的 cmets）。简而言之：（目前）在 Less 中生成选择器列表的最佳方式是 extend 功能，而不是一些基于字符串的操作。基于字符串的选择器生成仍然是可能的（实际上不需要自连接），但由于许多限制不推荐使用（仅仅是因为 Less 中的选择器不是字符串，因此基于字符串的选择器在许多情况下会中断）。
是的，我正在检查您的 less.curious 存储库，太好了，再次感谢您的提示。

标签： javascript css less

【解决方案1】：

是的，基本上，这是可能的，尽管不在同一个范围内。我最终得到了这样的递归方法

.concat-test { .concat(@rest...) { ._concat(@i, @result, @rest...) { @var: 提取(@rest, @i); .-() 当 (@i > 长度(@rest)) { @concat：@结果； } .-() 当 (default()) { ._concat(@i+1, ~"@{result}@{var}", @rest); } .-(); } ._concat(1, "", @rest); } @a:a; @b:b; @c:c; .concat（@a，@b，@c，@b，@a）；连接：@concat； }

【讨论】：

这基本上就是less-plugin-lists:join（另见cat）在一行中所做的......;）
@seven-phases-max 谢谢！太糟糕了，我在谷歌搜索“少 css 函数库”时没有机会偶然发现它。我会看看你的其他回购。我已经用 e(`(function () { return Array.prototype.slice.call(arguments).join(", ") })(@{a}, @{b})`) 完成了它，但只想用 LESS 重新创建它。