用循环生成变量（"Shorter/friendly-named alias for a complex statement"问题）

Question

我知道在 LESS 中可以使用 loops. I personally used this technique to answer another .

生成许多 CSS 类

现在我面临以下代码：

@transparent-black-10: fade(@nero, 0.1);
@transparent-black-20: fade(@nero, 0.2);
@transparent-black-30: fade(@nero, 0.3);
@transparent-black-40: fade(@nero, 0.4);
@transparent-black-50: fade(@nero, 0.5);
@transparent-black-60: fade(@nero, 0.6);
@transparent-black-70: fade(@nero, 0.7);
@transparent-black-80: fade(@nero, 0.8);
@transparent-black-90: fade(@nero, 0.9);

@transparent-white-10: fade(@bianco, 0.1);
@transparent-white-20: fade(@bianco, 0.2);
@transparent-white-30: fade(@bianco, 0.3);
@transparent-white-40: fade(@bianco, 0.4);
@transparent-white-50: fade(@bianco, 0.5);
@transparent-white-60: fade(@bianco, 0.6);
@transparent-white-70: fade(@bianco, 0.7);
@transparent-white-80: fade(@bianco, 0.8);
@transparent-white-90: fade(@bianco, 0.9);

我想知道是否可以像上面那样使用循环生成 LESS 变量，或者这被语言拒绝了。如果可能，您有什么建议可以更有效地生成上述代码吗？

Answer 1

（现在当 Less v3.x 及更高版本提供对自定义函数的本机支持时）。

就像在大多数其他编程语言中一样，这个编程问题不是通过 auto-generated/predefined 变量列表，而是通过 function 功能解决的。 IE。您定义一个函数，如：

.transparent-black(@value) {
    return: fade(@nero, @value ./ 10);
}

然后您只需使用 .transparent-black(*)[] 函数调用，而不是 @transparent-black-* 变量，例如：

div {
    color: .transparent-black(50)[];
}

这显然是一个简化的示例（在实际项目中我当然也会将 black/white/etc 作为函数参数）。

用循环生成变量（"Shorter/friendly-named alias for a complex statement"问题）

Generate variables with loops ("Shorter/friendly-named alias for a complex statement" problem)

loops

less