CSS calc exponential division

user_1543125 0
Viewed 1274

I have a base value 16px, I need to divide it by the ratio 1.067 6 times to reach the desired outcome value 10.84px, I'm currently doing this via:

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

Is there a more efficient way to write this calculation so I don't have to repeat the ratio multiple times? I was thinking something like this:

calc(16px / (1.067 * 6))

But that gives me an incorrect outcome value of 2.49px.

Any help would be greatly appreciated.

css-calc math css
1 Answers

You can use CSS variables to prepare the different divider:

: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

You can optimize if you don't want all of them:

: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

user_86203330
Related