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

【问题标题】：How can I interpolate a string/fraction mixin variable in LESS?如何在 LESS 中插入字符串/分数混合变量？
【发布时间】：2015-04-10 16:01:54
【问题描述】：

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

【问题讨论】：

【解决方案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);
}

【讨论】：