css - 有什么方法可以在更少的 CSS 中加入数组？

Question

数组、列表或 less 中调用的任何内容:

@fonts:
  ~"Droid+Sans:400,700",
  ~"Lato:300,900",
  ~"Open+Sans+Condensed:300,700"
;

我想将所有元素连接到一个字符串中并将其附加到一个 url。最终结果应该是:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Lato:300,900|Open+Sans+Condensed:300,700);

less 能做到吗？

Answer 1

对于这个特定用例，最紧凑的方法是使用 replace功能(低于 1.7.+)，例如:

@fonts:
  ~"Droid+Sans:400,700",
  ~"Lato:300,900",
  ~"Open+Sans+Condensed:300,700"
;

@url-font-list: replace('@{fonts}', ', ', '|', g);
@import url(~"http://fonts.googleapis.com/css?family=@{url-font-list}");

---

或者，您可以通过循环加入列表值，但我没有在这里给出示例，因为该方法非常臃肿，并且与上述解决方案相比没有任何优势。