less - 如何在 LESS 中插入字符串/分数混合变量？

Question

我正在尝试将我的网格系统减少到 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 专业人士可以启发我吗？

score 1 · Accepted Answer

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

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

尝试使用此代码。

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

1 回答 1