8 (499) 3-777-413

Использование calc() в Less

Использование препроцессоров это современный стандарт фронтенд разработки. Однако новые стандарты индустрии порождают и новые сложности. Данная статья призвана быстро ответить на вопрос: как использовать функцию калькуляции calc() в препроцессоре LESS.

// Ожидается, что такой код вернёт динамически рассчитанную ширину
width: calc(100% - 50px); 
// на выходе получим
width: calc(50%);

При компиляции данный код выдаст непредсказуемый результат, потому что препроцессор LESS пытается вычислить неэкранированные значения. Для использования функции calc() нам понадобится экранировать выражение в версиях Less ниже третьей.

height: ~'calc(2px + 7px)'; 

Такой код будет корректно срабатывать.