Где используется

Единственное место, где вы можете использовать функцию calc() - это в качестве значения свойства. Несколько примеров применения calc() для ряда различных свойств:

.box {
  font-size: calc(1vw + 2px);
  width: calc(100% - 25px);
  height: calc(100vh - 60px);
  padding: calc(1vw + 8px);
}

Также calc может быть частью значения свойства:

.box {
  margin: 10px calc(2vw + 10px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
  background: linear-gradient(to bottom, #1E88E5 0%, #1E88E5 calc(50% - 10px), #3949AB calc(50% + 10px), #3949AB 100%);
}

Размерные величины, с которыми работает calc: px, %, em, rem, in, mm, cm, pt, pc, ex, ch, vh, vw, vmin, vmax.

Допускается использование безразмерных величин и даже углов:

.box {
  line-height: calc(1.2 * 1.2);
  transform: rotate(calc(10deg * 5));
}

Для эстетики кода старайтесь упростить выражение внутри calc(), но если вычисления объёмные, функция поддерживает вложенность:

.box {
  width: calc(
    calc(100% / 3)
    -
    calc(1rem * 2)
  );
 /* Валидное выражение */
}
.box {
  width: calc(
    (100% / 3)
    -
    (1rem * 2)
  );
 /* Упрощённый вариант */
}

В сложных выражениях порядок выполнения действий такой же, как и в математике:

.box {
  width: calc(100% / 3 - 1rem * 2); /* Деление и умножение отработают сперва, а потом вычитание */
}

Где использование calc() не сработает

В вычислениях несоответствующих величин

.box {
  margin-top: calc(10px + 5); /* не сработает - не указана единица измерения для 5 */
  margin-bottom: calc(30px / 10px);  /* не сработает - деление и умножение должно осуществляться с безразмерной величиной */
  margin-left: calc(30px / 0); /* не сработает - делить на 0 нельзя */
}

В выражениях с неверным синтаксисом

.box1 {
  font-size: calc(3vw+2px);
  font-size: calc(3vw-2px);
 /* не сработают - нет пробела между значениями и знаком действия */
}
.box2 {
  width: calc (100% / 3);
 /* не сработают - не должно быть пробела между calc и ( ) */
}

В выражениях со строками

.el {
  counter-reset: calc("Мой " + "счётчик");  /* Не сработает */
}
.el::before {
  content: calc("Текст " * 3);  /* Не сработает */
}

В выражениях со значениями атрибутов

<div class="grid" data-columns="7" data-gap="2">
  ...
</div>

.grid {
  display: grid;

  /* Не сработает */
  grid-template-columns: repeat(attr(data-columns), 1fr);
  grid-gap: calc(1rem * attr(data-gap));
}

В параметрах медиа-выражений

@media (min-width: calc(40rem + 1px)) {
  /* Не сработает */
}