有什么方法可以用更少的CSS连接数组吗?

zkure5ic  于 2023-04-13  发布在  其他
关注(0)|答案(2)|浏览(101)

数组、列表或任何在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);

更少能做到这一点吗?

x7yiwoj4

x7yiwoj41#

对于 * 这个特定的用例 *,最紧凑的方法是使用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}");

-—-

或者,你可以通过循环连接列表值,但我不会在这里给出一个例子,因为这种方法相当臃肿,不会有任何优势以上的解决方案。

0yg35tkg

0yg35tkg2#

我一直在寻找一种更通用的方法来连接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;
}

相关问题