有什么方法可以在 less 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);

少能做到吗？

Answer 1

为这个特定用例做到这一点的最紧凑的方法是使用

replace

函数（Less 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}");

---

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

Answer 2

我一直在寻找一种更通用的方法来连接 LESS 中的列表项，但由于它是一种声明性语言，因此您不能在循环中附加列表项（您不能在循环中修改任何变量）。所以，我尝试了一种递归方法。

优点是您可以使用内置函数

e()

去除引号并自定义语句

~"@{a}@{del}@{b}"

根据需要加入项目或反转它们的顺序。

.join-list(@del, @rest...) {

  ._join(0, @a, @list) {
    @result: ~"@{a}";
  }

  ._join(@i, @b, @list) when (@i > 0) {
    @a: e(extract(@list, @i));
    ._join(@i - 1, ~"@{a}@{del}@{b}", @list);
  }

  @n: length(@rest);
  ._join(@n - 1, e(extract(@rest, @n)), @rest);
}

例子：

// Fonts list example
@fonts: "Droid+Sans:400,700", "Lato:300,900", "Open+Sans+Condensed:300,700";
@joined: .join-list("|", @fonts)[@result];
@import (css) url('http://fonts.googleapis.com/css?family=@{joined}');

test-join-list {
  // Pass list
  @list: "alpha", "bravo", "charlie";
  content: .join-list("-", @list)[@result];

  // Pass list items as parameters
  content: .join-list("-", "a", "b", "c")[@result];
}

输出：

@import url('http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Lato:300,900|Open+Sans+Condensed:300,700');
test-join-list {
  content: alpha-bravo-charlie;
  content: a-b-c;
}