css less mixin for fonts

Question

I'm trying to finish up a mixin for calculating font-size in rem unit based on px with fallback if browser doesn't support rem to use px. But I have a problem if I parse let's say 16px it will become value+pxpx.

The main problem would be that if I want to use the same variable somewhere else I can't because I have to define it without px or unit measurement.

How can I make it pass the value including unit measurement and return it correctly?

For those who will read it very fast and think why not remove the concatenate without px won't work. would become pxrem

.remCalc(@sizeValue) {
  @remValue: (@sizeValue / @font-size-base);
  font-size: ~"@{sizeValue}px";
  font-size: ~"@{remValue}rem";
}

Answer 1

you can use the unit() function .

.remCalc(@sv) {
  @sizeValue: unit(@sv);
  @remValue: (@sizeValue / @font-size-base);
  font-size: unit(@sv,px);
  font-size: unit(@remValue,rem)";
}

example:

@sv: 10px;

the function can strip the unit

unit(@sv); // 10

or change the unit

unit(@sv,em); // 10em