0

升级到 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);
}
4

1 回答 1

3

只需删除括号和引号： 

@{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);
    }
}
于 2013-10-15T12:18:10.023 回答