如何在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错误。

显然更不能分辨出它是一小部分，但随后poops出来。

任何LESS专业人员可以告诉我吗？

Answer 1

你需要逃出乘法，加法，除法和减法少用或它会尝试输出的计算结果。当你的代码中看到*时，它试图乘以99.999999%和@_fraction。

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

请尝试使用此代码。

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