Properly compile a LESS file with font sizes

Question

I'm trying to modify the Less WordPress theme, available at http://jarederickson.com/less-a-free-super-minimal-wordpress-theme/, and doing so involves altering and recompiling the builtin stylesheet which uses LESS (dev/style.less)

But I cannot get the LESS stylesheet in this theme to compile properly. When I do "lessc dev/style.less", I get an output where all the font sizes are messed up. Here's some of the diff between the supplied compiled stylesheet and the one I'm able to produce:

538,539c521,522
<   font-size: 38px;
<   font-size: 3.8rem;
---
>   font-size: 38pxpx;
>   font-size: 3.8pxrem;
573,574c556,557
<   font-size: 10px;
<   font-size: 1rem;
---
>   font-size: 10pxpx;
>   font-size: 1pxrem;

I am really inexperienced with LESS so I'm assuming it's just something I don't know about setting up my environment.

I have tried multiple versions of lessc running through either Ruby or NodeJS. All I could find by Googling this issue is something about a commonly used font-size mixin that does not appear in this Less file; is there some way to install this mixin on my computer or something?

Answer 1

Those weird font-size units are result of an ancient (and now "anti-pattern") method of unit string concatenation within the .font-size mixin:

font-size: ~"@{px-value}px"; 
font-size: ~"@{rem-value}rem";

Obviously when you invoke .font-size with parameter already having its unit e.g. .font-size(10px); it results in font-size: 10pxpx;. Well, it works with the original code since there all of the values used with the mixing are unitless. Either way:

Solution: The proper method to add, remove or change the unit of a value is the unit function, i.e. change those two lines in .font-size mixin to:

font-size: unit(@px-value, px); 
font-size: unit(@rem-value, rem);