Функция calc() дает возможность рассчитать значения CSS-свойств во время их определения. Полезной особенностью этой функции является возможность смешивать значения операндов с различными единицами измерения. Так же, calc() можно использовать для деления исходного значения на равные части.

Перейдем к примерам:

.class {
    width: calc(100% - 50px);
}

В примере, приведенном выше, мы задали элементу .class ширину 100% и затем уменьшили ее на 50 пикселей.

Для функции calc можно использовать следующие математические операторы:

1. сложение +,
2. вычитание -,
3. умножение *,
4. деление /.

Синтаксис математических выражений имеет ряд особенностей:

1. Деление на ноль приведет к ошибке парсинга HTML,
2. Операторы + и - должны быть отделены с обеих сторон пробелами. Так, выражение calc(100% -50px) будет интерпретировано, как два следующих друг за другом числа: 100% и -50px - то есть, значение свойства будет определено скорее всего как неверное.
3. В свою очередь, операторы * и / не требуют обязательного отделения от операндов пробелами.

Итак, еще один полезный трюк с функцией calc:

.element {
    width: calc(100% / 3);
}

Это эффективный прием. К сожалению, такой подход к созданию сетки не является рекомендуемым, но, тем не менее, это работает.

Еще calc() можно использовать с CSS-переменными:

.foo {
    --widthA: 100px;
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);
}

Спасибо за внимание.