根据其索引号样式化元素

Question

我一直在尝试一些事情，但是没有找到完全适合我想要做的事情。

以下代码段是我想要实现的目标……

ul {
  --liWidth: 10px;
}

ul li {
  margin-left: calc(var(--liWidth) * var(--n));
  font-size: calc(20px - 1px * var(--n));
}

<ul>
  <li style="--n: 1;">LI 1</li>
  <li style="--n: 2;">LI 2</li>
  <li style="--n: 3;">LI 3</li>
  <li style="--n: 4;">LI 4</li>
  <li style="--n: 5;">LI 5</li>
  <li style="--n: 6;">LI 6</li>
  <li style="--n: 7;">LI 7</li>
  <li style="--n: 8;">LI 8</li>
</ul>

…但是不用我的n CSS变量。
为什么？如果要使用一百个li，我不想输入。

是否有可能像margin-left: calc(var(--liWidth) * nth-of-type());一样？
如果不是，使用JavaScript最简单的不是什么？ （我已经知道如何使用它了）

谢谢。