生成带有循环的变量(“复杂语句的"Shorter/友好命名别名"问题) [英] Generate variables with loops ("Shorter/friendly-named alias for a complex statement" problem)

问题描述

我知道在LESS中可以使用循环生成许多CSS类.我亲自使用此技术来回答另一个用户的问题.

I know that in LESS is possible to generate many CSS classes using loops. I personally used this technique to answer another user's question.

现在我要面对以下代码:

Now I'm facing the following code:

@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变量，或者被语言拒绝.如果可能的话，您是否有一些建议可以更有效地生成上述代码?

I'm wondering if is possible to generate also LESS variables like above, using Loops, or this is denied by language. If possible, do you have some suggestion to generate above code more efficiently?

推荐答案

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

(Now when Less v3.x and higher provides native support for custom functions).

不是通过自动生成/预定义的变量列表，而是通过function功能解决了此编程问题. IE.您可以定义如下功能:

Just as in most of other programming language, instead of a list of auto-generated/predefined variables, this programming problem is solved via function functionality. I.e. you define a function like:

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

然后使用.transparent-black(*)[]函数调用代替@transparent-black-*变量，例如:

And then instead of @transparent-black-* variable you simply use .transparent-black(*)[] function call, e.g.:

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

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

This is obviously a simplified example (in a real project I certainly would make black/white/etc to be the function parameters too).

这篇关于生成带有循环的变量(“复杂语句的"Shorter/友好命名别名"问题)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！