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

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 功能解决的。IE。你定义一个像这样的函数:

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

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

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

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