0

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

.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 预处理器必须能够更智能地做到这一点。

谢谢！

4

1 回答 1

1

Less.js “for” 片段也有几行文档。几天前，当我遇到像您这样的问题时，我发现此页面非常有用。

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

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

于 2014-07-08T08:41:47.983 回答