如何在LESS中插入字符串/分数mixin变量？

Question

我正在尝试将我的grid system推向LESS。

我使用分数作为字符串（这是有原因的），需要在calc()表达式中插入它们。

在萨斯，我可以做到这一点......

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

我尝试这个时很少......

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

最终导致Cannot read property 'numerator' of undefined错误。

显然LESS可以告诉它只是一小部分然后它会消失。

任何LESS专业人士都可以启发我吗？

Answer 1

您需要在LESS中转义乘法，加法，除法和减法，否则它将尝试输出计算结果。当Less在您的代码中看到*时，它会尝试将99.999999%和@_fraction相乘。

例如，当LESS看到calc(5px + 5px);时，它会输出left: calc(10px);。你可以像~'calc(5px + 5px);'一样除外。

尝试使用此代码。

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