CODEWITHSUNDEEP
cssless
Bogdan
Bogdan

Reputation: 713

css less mixin for fonts

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";
}

Upvotes: 1

Views: 1334

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21214

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

Upvotes: 5

Related Questions