Проблемы с Calc в Меньше

Question

Я пытаюсь определить переменную, чтобы получить динамическую высоту и выполнить некоторые операции с ней;Но код не удалось скомпилировать.Как я могу справиться с проблемой?Спасибо.

"less": "3.9.0",

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

Answer 1

Возможно, вам понадобится переместить calc из вашей переменной в места, где вы ее используете, и избежать операторов. Используя https://lesstester.com/, чтобы выполнить быстрый тест, следующий код меньше

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

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

становится этим при разборе

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