CSS кал c экспоненциальное деление

Question

У меня есть базовое значение 16px, мне нужно разделить его на соотношение 1.067 6 раз, чтобы достичь желаемого значения результата 10.84px, в настоящее время я делаю это через:

body {
  font-size: calc(16px / 1.067 / 1.067 / 1.067 / 1.067 / 1.067 / 1.067);
}

Есть ли более эффективный способ написать это вычисление, чтобы мне не приходилось повторять соотношение несколько раз? Я думал примерно так:

calc(16px / (1.067 * 6))

Но это дает мне неверное значение результата 2.49px.

Любая помощь будет принята с благодарностью.

Answer 1

Вы можете использовать CSS переменные для подготовки другого делителя:

:root {
  --x1:1.067;
  --x2:calc(var(--x1)*var(--x1));
  --x3:calc(var(--x2)*var(--x1));
  --x4:calc(var(--x3)*var(--x1));
  --x5:calc(var(--x4)*var(--x1));
  --x6:calc(var(--x5)*var(--x1));
}

body {
  font-size: calc(16px / var(--x6));
}

some text here

Вы можете оптимизировать, если не хотите все из них:

:root {
  --x1:1.067;
  --x2:calc(var(--x1)*var(--x1));
  --x3:calc(var(--x2)*var(--x1));
  --x6:calc(var(--x3)*var(--x3));
}

body {
  font-size: calc(16px / var(--x6));
}

some text here