0

グリッド システムを LESS にしようとしています。

分数を文字列として使用しており (理由があります)、calc()式で分数を補間する必要があります。

Sassでこれを行うことができます...

@mixin move($fraction: '1/1') {
  position: relative;
  left: calc(99.999999% * #{$fraction});
}

これを試してみるとLESSで...

.move(@fraction: '1/1') {
  @_fraction: ~'@{fraction}';
  left: calc(99.999999% * @_fraction);
}

エラーをスローしてしまいCannot read property 'numerator' of undefinedます。

どうやら LESS はそれが分数であることを知ることができますが、その後うんちが出ます。

LESS のプロから教えてもらえますか?

4

1 に答える 1

1

LESS では、掛け算、足し算、割り算、引き算をエスケープする必要があります。エスケープしないと、計算結果を出力しようとします。コード内でless が表示されている場合は、 and*を乗算しようとしています。99.999999%@_fraction

たとえば、LESS が表示calc(5px + 5px);されると、 が出力されますleft: calc(10px);。このように除外できます~'calc(5px + 5px);'。

このコードを使用してみてください。

.move(@fraction: '1/1') {
  @_fraction: ~'@{fraction}';
  left: calc(~'99.999999% *' @_fraction);
}
于 2015-04-06T01:41:34.870 に答える