Question

升级到LESS 1.4.0后，我在以下代码的第一行收到编译错误：

   (~"@{containerClass} .scrollElement.nth-child-@{index}") {
     // the resulting css
     left: @index * @seTotalWidth - @seTotalWidth;
   }

编译错误：无法识别的输入

这段代码应该如何在LESS 1.4.0中看到？

我在http://lesscss.org/注意到〜“已被弃用，但不是如何将其用于多个元素。

“完整”参考资料来源

// Caller
.setPositionLeftForScrollElements ("#fgScroller", @maxFeaturedGuides + 2, @seTotalWidth);

// will be called as long the index is above 0
.setPositionLeftForScrollElements (@containerSelector, @index, @seTotalWidth) when (@index > 0) {

  ~"@{containerSelector} .scrollElement.nth-child-@{index}" {
    // the resulting css
    left: @index * @seTotalWidth - @seTotalWidth;
  }
  ~"@{containerSelector} .scrollElement:nth-child(@{index})" {
    // the resulting css
    left: @index * @seTotalWidth - @seTotalWidth;
  }

  // next iteration
  .setPositionLeftForScrollElements(@containerSelector, @index - 1, @seTotalWidth);
}

应用@ seven-phases-max

建议的更改后的源代码

.setPositionLeftForScrollElements (~"#fgScroller", @maxFeaturedGuides + 2, @seTotalWidth);

// will be called as long the index is above 0
.setPositionLeftForScrollElements (@containerSelector, @index, @seTotalWidth) when (@index > 0) {

  @{containerSelector} .scrollElement.nth-child-@{index} {
    // the resulting css
    left: @index * @seTotalWidth - @seTotalWidth;
  }
  @{containerSelector} .scrollElement:nth-child(@{index}) {
    // the resulting css
    left: @index * @seTotalWidth - @seTotalWidth;
  }

  // next iteration
  .setPositionLeftForScrollElements(@containerSelector, @index - 1, @seTotalWidth);
}

Answer 1

只需删除parens和引号：

@{containerClass} .scrollElement.nth-child-@{index} {
     left: @index * @seTotalWidth - @seTotalWidth;
}

更新，这是完整代码段，将其复制并粘贴到http://less2css.org/以查看结果：

.setPositionLeftForScrollElements(div, 3, 100px); // start the loop

// will be called as long the index is above 0
.setPositionLeftForScrollElements(@containerSelector, @index, @seTotalWidth) when (@index > 0) {

  @{containerSelector} .scrollElement.nth-child-@{index} {
    // the resulting css
    left: @index * @seTotalWidth - @seTotalWidth;
  }

  @{containerSelector} .scrollElement:nth-child(@{index}) {
    // the resulting css
    left: @index * @seTotalWidth - @seTotalWidth;
  }

  // next iteration
  .setPositionLeftForScrollElements(@containerSelector, @index - 1, @seTotalWidth);
}

确保--strict-math选项关闭（否则你需要为所有数学表达式添加parens）

好的，既然我的主要兴趣在于各种LESS优化，那么这里有一些提示（以防万一）：

#fgScroller {
    .setPositionLeftForScrollElements(3, 100px);
}

.setPositionLeftForScrollElements(@index, @width) when (@index > 0) {
    .setPositionLeftForScrollElements(@index - 1, @width);

    .scrollElement.nth-child-@{index},
    .scrollElement:nth-child(@{index}) {
        left: width * (@index - 1);
    }
}

如何从〜“在LESS 1.4.0中迁移

1 个答案: