用更少的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函数(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}@{sep}@{b}"来根据需要连接项目或颠倒它们的顺序。

.list-join(@sep, @rest...) {
  ._loop(0, @a) {
    @result: ~"@{a}";
  }
  ._loop(@i, @b) when (@i > 0) {
    @a: e(extract(@rest, @i));
    ._loop(@i - 1, ~"@{a}@{sep}@{b}");
  }
  @num: length(@rest);
  ._loop(@num - 1, e(extract(@rest, @num)));
}

的例子:

// Fonts list example
@fonts: "Droid+Sans:400,700", "Lato:300,900", "Open+Sans+Condensed:300,700";
@joined: .list-join("|", @fonts)[@result];
@import (css) url('http://fonts.googleapis.com/css?family=@{joined}');
test-list-join {
  // Pass list as argument
  @list: "alpha", "bravo", "charlie";
  content: .list-join("-", @list)[@result];
  // Pass list items as multiple arguments
  content: .list-join("-", "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-list-join {
  content: alpha-bravo-charlie;
  content: a-b-c;
}