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);