在少量CSS中加入数组的任何方法？

Question

数组，列表或其他在less中调用的内容：

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

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

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

可以少做这个吗？

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}");

<强> ---

或者你可以通过循环加入列表值，但我不在这里给出一个例子，因为这个方法非常膨胀，并且与上述解决方案相比没有任何优势。