css - 如何在 LESS 1.4.0 中从 ~"迁移

Question

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

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

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

此代码在 LESS 1.4.0 中应该如何显示？

我注意到 http://lesscss.org/ that ~"已被弃用，但不是如何将它用于多个元素。

“完整”引用资料

// 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

只需删除括号和引号:

@{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 选项关闭(否则您需要为所有数学表达式添加括号)

---

好的，由于我的主要兴趣在于各种 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);
    }
}