1

I usually use SCSS as it's the trend and the one I prefer. I used Less for comparison between both. I found that there is something really strange when using Less.

When I use the calc function with SCSS for example like height: calc(100vh - 64px), it converts the 100vh to px, then subtracts the two numbers and converts it back into vh unit which exactly what is needed.

On the other hand, when doing the same but with Less, it immediately converts the number after the minus sign to be the same unit as the one before and then subtracts the number which is very strange. Because in the former example the calculated height; using Less; would be 36vh which is calc(100vh - 64vh) which is not the case.

Does anyone have any idea how to solve this problem when using Less?

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
Tes3awy
  • 2,166
  • 5
  • 29
  • 51
  • Less v3 does not touch `calc` statements at all. This is a browser function that offline compilers simply can't evaluate as soon as values used there may be not known at the compile time. E.g. "SCSS converts the 100vh to px" - how can SCSS know what would be `1vh` in pixels *before* you even apply the compiled CSS to any page (i.e. the height of a viewport is basically unknown)? If you're using Less v2 or below see https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc. – seven-phases-max Jun 13 '18 at 19:58
  • @seven-phases-max My trace to the `calc` got me to this point. If it's not, then how is it calculated? I would like to know if I am wrong – Tes3awy Jun 13 '18 at 20:01
  • @seven-phases-max The OP is just confused as to the difference between what SCSS is doing and what the browser is doing. – Heretic Monkey Jun 13 '18 at 20:01
  • @seven-phases-max I was searching for a similar answered question but I couldn't find. Thanks a lot for the link (Y). – Tes3awy Jun 13 '18 at 20:06

1 Answers1

3

I had the same issue when I went from SASS to Less. You need to surround your calc() with quotations and a ~ in the front of it. Then it will calculate correctly. This is something called Less Language Escaping.

Less:

.test-div {
  width: ~"calc(100vh + 60vh)";
}
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
Hunter Turner
  • 6,804
  • 11
  • 41
  • 56
  • Thanks a lot. But I have another question, is it a bug or this is how LESS is used? – Tes3awy Jun 13 '18 at 19:56
  • 1
    It's not a bug, this is intentional. It's called [Less Language Escaping](https://github.com/SomMeri/less4j/wiki/Less-Language-Escaping). – Hunter Turner Jun 13 '18 at 19:57