如何在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); 
}