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)[];
}

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

少：用循环生成@variables

1 个答案: