Why is the ceil() function in LESS CSS failing for font calcuation?

Question

I am trying to calculate font size based on ceil() and other. But ceil works first time but fails second time which is next to it after few lines of LESS. I tried with unit() as well. But nothing working easily. Two instances of similar code give different result.

Here is a code I have written again without ceil():

// Mobile First Approach
@font-family-base:      "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-color-base:       #4b4b4b;

@starting-font-size:        0.6em;

@font-size-base:            @starting-font-size;
@line-height-base:          1;
@letter-spacing-base:       -0.05em; 

@font-size-medium:          @font-size-base * 1.25;  //ceil(unit(@font-size-base) * 1.25)
@line-height-medium:        1.2;
@letter-spacing-medium:     0;

@font-size-large:           @font-size-base * 1.50; //ceil(unit(@font-size-base) * 1.50)
@line-height-large:         1.5;
@letter-spacing-large:      0.05em; 

@device-small : 24em;
@device-medium : 46.8em;
@device-large : 50em;


body{
    font-family: @font-family-base;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @font-color-base;
    word-wrap:break-word;

}

@media screen and (max-width:@device-medium) and (min-width: @device-small)
    {
      /* Tablet */
      body {
        font-size:      @font-size-medium;
        line-height:    @line-height-medium;
        letter-spacing: @letter-spacing-medium;
      }
    }
    @media screen and (min-width: @device-large)
    {
      /* Large screen */
      body {
        font:           @font-size-large;
        line-height:    @line-height-large;
        letter-spacing: @letter-spacing-large;
      }
    }

Here is output from LESS2CSS.org. The problem is coming on PrePros App as well on Window.

@media screen and (min-width: 50em) {
  /* Large screen */
  body {
    font: 0.6em * 1.5;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
}

Above Font size is the problem. At other time, the font size comes as "1em" in quote.

How do you calculate font-size based on base font size?

Update:

Just for info to all, This way, calculation is working:

 round((@font-size-base * 1.2), 2);  

Answer 1

I looked through the LESS sources and it appears the hocus-pocus is the font property (Notice that in the example 'Tablet body' uses font-size and 'Large screen body' uses font). LESS always interpreters font values with strict-math: on regardless of the actual compiler options. This also applies to any function used in font statement. I.e. (with strict-math: off):

div {
    font:      1.5;              // -> 1.5
    font:      1.5 * 1.5;        // -> 1.5 * 1.5
    font:      round(1.5 * 1.5); // Error, because it is 1.5 * 1.5 "string"
    font-size: 1.5;              // -> 1.5
    font-size: 1.5 * 1.5;        // -> 2.25
    font-size: round(1.5 * 1.5); // -> 2
}

I guess this was hardcoded there as a workaround for values like font: "Name" 5px/16px ...; and introduces this bug-like side-effect.

Answer 2

Appears to be a (Pseudo) Strict Math Issue with Math Functions

Apparently extra parenthesis are needed around some math operations within the math functions. So either of these work, depending on whether you want the units to carry through or not from the base font.

ceil((unit(@font-size-base) * 1.50)) //eliminates units

ceil((@font-size-base * 1.50)) //keeps units