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

Posted 2023-02-25

【中文标题】构建字符串，这取决于可变数量的参数

【英文标题】：Building of a string, which depends on variable number of parameters

【发布时间】：2015-07-13 12:11:53

【问题描述】：

我的问题是：如何在 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。

【问题讨论】：

抱歉之前的评论有误，这不会导致递归定义错误，因为您使用了不同的变量。

【参考方案1】：

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

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

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

【讨论】：

这个方案看起来更优雅，不错！

@dajnz: 总是乐于帮助队友:)

并且以防万一你不需要& （本地混合变量总是在混合本身中具有最高优先级，因此上一个迭代和下一个迭代都不会干扰）。

糟糕，正在尝试其他方法，但似乎忘记删除了。感谢您指出@seven-phases-max :) 额外的font-format 变量也不是必需的。

【参考方案2】：

最后，我找到了自己的解决方案：如果我们在循环的最后一次迭代中触发带有保护的特殊“getter”混合，我们可以从循环混合中获得完整的 src 值。

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

这是fiddle with demo

【讨论】：

嗯，是的，如果你使用一个变量进行这种连接，循环应该有一个“终端”迭代特化来定义结果变量（经典例子是1，2，3等）。

虽然对于特定的用例，我想知道一个循环是否真的适合真正的字体定义，因为 src 声明 font-face 具有所有向后兼容性和浏览器解决方法 won't follow a strict pattern（即如果需要，我宁愿对每个 src 手动硬编码一个条件（或条件列表）。