Problems with Calc in Less

Question

I try to define a variable to get dynamic height and do some operations on it; But the code failed to compile. How can I deal with the problem? Thanks.

"less": "3.9.0",

@block-height: calc(~"(100vh - 110px) / 3");
.block1{
  height: @block-height - 100
}
.block2{
  height: @block-height * 2
}

https://stackoverflow.com/questions/42655333/calc-with-variables-not-possible-syntaxerror-operation-on-an-invalid-type might help — JasonB, May 17 '19 at 03:44
If anything fails to compile, don't forget to share the error message that compiler throw. — Syed Ekram Uddin, May 17 '19 at 04:11

score 1 · Accepted Answer · answered May 17 '19 at 03:51

You may need to move the calc from your variable to the places you are using it, and escape the operators. Using https://lesstester.com/ to do a quick test, the following less source code

@block-height: ~"(100vh - 110px) / 3"; 

.block1{ height: calc( @block-height ~"-" 100 ); } 
.block2{ height: calc( @block-height ~"*" 2); }

becomes this when parsed

.block1 {
    height: calc((100vh - 110px) / 3 - 100);
}
.block2 {
    height: calc((100vh - 110px) / 3 * 2);
}

Problems with Calc in Less

1 Answers1