1

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);
ScottS
  • 71,703
  • 13
  • 126
  • 146
Satya Prakash
  • 3,372
  • 3
  • 31
  • 47
  • and, I suppose this should work: `ceil(unit(@font-size-base) * 1.50)`, but it does not. Error: Arg to ceil should be a number. – Satya Prakash Oct 31 '13 at 11:54

2 Answers2

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
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Yes, it works. But it looks there is a bug as well. When I use this: `@font-size-medium: @font-size-base * 1.25; @font-size-large: @font-size-base * 1.50; ` then 2nd one fails but first one pass. – Satya Prakash Oct 31 '13 at 13:31
  • Also, round() works without extra (). `round(@font-size-base * 1.50, 2);` – Satya Prakash Oct 31 '13 at 13:34
  • I will accept your answer thought I was looking for a magic for magical problem. Sometimes it works and sometimes it does not. Magic is not expected so easily. :) – Satya Prakash Oct 31 '13 at 13:46
  • @SatyaPrakash: What version of LESS are you running and with what compiler? `round()` fails for me without parentheses on version 1.4.1 at http://less2css.org/, while the font-sizing declarations both pass through fine. – ScottS Oct 31 '13 at 13:48
  • @SatyaPrakash: it does seem to be either a bug or an inconsistency. I realized that `strict-math` is not set on the options for the http://less2css.org/ compiler, so that was not really the issue. It appears that some of the math functions need to have the parenthesis to recognize they are being passed "a number" as they are expecting. – ScottS Oct 31 '13 at 13:56
  • I recently downloaded Prepros. round() is easily working for me. – Satya Prakash Nov 04 '13 at 06:59
  • thanks for the reply. Voted but removed as the right answer. seven-phases-max has earned that. According to him, "font:" is taken as strict math even without the setting. – Satya Prakash Nov 04 '13 at 07:09
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.

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
  • How can we turn off strict maths option? – Shashank Bhatt Oct 25 '19 at 05:55
  • @ShashankBhatt - there is [an example here](https://webpack.js.org/loaders/less-loader/#object), but i tried that configuration option and it didn't resolve the error for me when building with webpack. – user1063287 Oct 31 '21 at 12:41
  • 1
    Update, for reference: Setting `math: "always"` in webpack `less-loader` options worked for me, per: https://lesscss.org/usage/#less-options-math – user1063287 Oct 31 '21 at 13:06