Question

目前，我的一位开发人员开发了这个较少的文件：

.countryFlag( @countryName :"DK"){
    content: url("/images/flags/@{countryName}.gif") no-repeat center;
}

a.flag-DK {
    .countryFlag ();
}

a.flag-DE {
    .countryFlag (DE);
}

a.flag-EE {
    .countryFlag (EE);
}

...

有大约20个国家。我想知道这是否可以用更少的智能完成，无论是使用在运行时创建的循环还是动态名称。请考虑以下描述我想要的伪代码：

a.flag-@{country} {
  content: url("/images/flags/@{country}.gif") no-repeat center;
}

只是匹配任何定义。我知道这可能会产生很多冲突，但也许可以通过正则表达式进一步缩小范围？有道理，但一直未能找到。

另一种方法是使用某种循环创建“静态”css类。考虑这个伪替代方案：

@countries: 'dk', 'de', 'uk', 'us', ...;

for(country : countries) {
    a.flag-@{country} {
        content: url("/images/flags/@{country}.gif") no-repeat center;
    }
}

因此为预先确定的国家/地区列表创建类。

这些替代方案中的任何一种都可以某种方式提供吗？或者您可以建议我可能忽略的第三种选择？当我看到20个几乎相同的类被定义时，我觉得有点愚蠢，只有一个不同的小字符串，并认为CSS预处理器必须能够更聪明地做到这一点。

谢谢！

Answer 1

Less.js "for" snippet也有几行文档。几天前，当我遇到像你这样的问题时，我发现this page非常有用。

您可以简单地声明要在foreach循环中用作字符串的值列表。（例如@list: banana, apple, pear, potato, carrot, peach;）

确保您使用的是最新版本的Less！

运行时生成的动态类名较少，或者从数组循环生成的类

1 个答案: