生成带有循环的变量（“复杂语句的更短名称/友好命名的别名”问题）

Question

我知道在LESS中可以使用loops生成许多CSS类。我亲自使用此技术来回答另一个user's question。

现在我正在面对以下代码：

@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和更高版本提供对自定义函数的本机支持时。

与大多数其他编程语言一样，不是通过自动生成/预定义的变量列表，而是通过function功能解决了此编程问题。即您定义一个函数，如：

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

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

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