Question

我的问题是：如何在Less中构建一个字符串，这取决于可变数量的参数。例如，我想制作一个mixin，这有助于我编写@font-face CSS规则。因此，我需要为我的字体的任意数量的格式（.eot，.ttf，.oft，.woff，.woff2，.svg）构建src:... fonts属性。这是我的Less循环来处理列表中的所有字体格式：

// @some-types - it is my font formats list, just smth. like 'otf', 'eot',...
// @old-src-value - it is string with src for my font from previous loop
// @counter - it is my loop counter 

.make-font-src(@some-types; @old-src-value; @counter) when (@counter <= length(@some-types)) {

    // Here we get next font format from @some-types
    @font-type: extract(@some-types, @counter);

    // Used for building 'format("opentype")' - like part of src value string
    .get-font-format(@font-type);

    // Building a part of src value string for this iteration
    @src-value: e('@{old-src-value}, url("@{font-path}@{font-filename}.@{font-type}") format("@{font-format}")');

    // Recursive call of this mixin for looping
    .make-font-src(@some-types; @src-value; (@counter + 1));
}

所以当我在循环中处理所有字体格式时，我陷入了如何获取完整的src值字符串？另请参阅this codepen demo。

Answer 1

正如我的评论中所提到的，这不会导致递归定义错误，因为您已将值分配给另一个变量然后使用它。但是，一旦循环的第一次迭代完成，似乎Less正在处理属性值设置行。您可以通过将第一次迭代本身的counter值更改为2或更多来验证这一点。

我认为一个解决方案（更好地解决问题的方法）是使用property merging with comma功能并直接设置属性 - 值对，如下面的代码段所示：

.make-font-src(@some-types; @counter) when (@counter <= length(@some-types)) {
  @font-path: 'some/test/path/';
  @font-filename: 'Arial';
  @font-type: extract(@some-types, @counter);
  src+: e('url("@{font-path}@{font-filename}.@{font-type}") format("@{font-type}")');
  .make-font-src(@some-types; (@counter + 1));
}
div.test {
  .make-font-src('eot', 'woff', 'svg'; 1);
}

编译时会产生以下输出：

div.test {
  src: url("some/test/path/Arial.eot") format("eot"), 
       url("some/test/path/Arial.woff") format("woff"),
       url("some/test/path/Arial.svg") format("svg");
}

Answer 2

最后，我找到了自己的解决方案：如果我们添加特殊的“getter”＆＃39; mixin with guard，在循环的最后一次迭代时触发，我们可以从循环mixin中获得完整的src值。

.getter(@cond; @list) when (@cond = length(@list)) {
    @font-src-full: @src-value;
}

这是fiddle with demo

构建字符串，这取决于可变数量的参数

2 个答案: