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 オプションがオフになっていることを確認します (そうでない場合は、すべての数式に括弧を追加する必要があります)。

OK、私の主な関心はさまざまな 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 に答える