Html 自定义CSS变量与Sass索引技术混淆？

下面是代码的链接，不太长，54行+HTML：

我遇到的问题是我不明白这条线是如何工作的，在第22行：

--m-ini: calc(var(--i, 0) - #{$p});

在上下文中，我不知道--I（index）自定义CSS变量是如何处理或访问这些索引的，动画中的每个调用是如何选取每个索引的？（由SASS编制）：

我相信这与calc（）或var（）和自定义变量的功能无关，但我真的很惊讶

---

这是基于其他人的代码，他们有一个youtube视频，但帮助不大。

第22行是一个自定义变量

--m-ini

--i

是另一个自定义变量，其值在第44行设置。第41行是迭代的a声明，其中

$i

是从1到16的每次迭代，

--i

被设置为

$i
第22行是一个自定义变量
--m-ini
--i
是另一个自定义变量，其值在第44行设置。第41行是迭代的a声明，其中
$i
是从1到16的每次迭代，
--i
被设置为
$i
好的，那么
--i
在
--m-ini:calc（var（-i，0）-{$p}中的
--i
是什么意思呢如果多次设置了
--i
，请参阅？我知道
0
是当什么都不存在时的deafult值。很可能我误解了整个设置。
--i
未在
--m-ini
声明中定义，因此正在使用默认值
0
<代码>--i
正在迭代中更新。因此，每个球，
n个子球
都有一个不同的值，
--i
，迭代数，在
状态
mixin
translate
和
scale
函数中使用如果多次设置了
--i
，请参阅？我知道
0
是当什么都不存在时的deafult值。很可能我误解了整个设置。
--i
未在
--m-ini
声明中定义，因此正在使用默认值
0
<代码>--i

正在迭代中更新。因此，每个球，

n子球

都有一个不同的

--i

值，迭代数，用于

状态

mixin

翻译

和

缩放

函数。

.ball:nth-child(2) {
  --i: 1;
}
.ball:nth-child(3) {
  --i: 2;
}
.ball:nth-child(4) {
  --i: 3;
}
.ball:nth-child(5) {
  --i: 4;
}
.ball:nth-child(6) {
  --i: 5;
}
.ball:nth-child(7) {
  --i: 6;
}
.ball:nth-child(8) {
  --i: 7;
}
.ball:nth-child(9) {
  --i: 8;
}
.ball:nth-child(10) {
  --i: 9;
}
.ball:nth-child(11) {
  --i: 10;
}
.ball:nth-child(12) {
  --i: 11;
}
.ball:nth-child(13) {
  --i: 12;
}
.ball:nth-child(14) {
  --i: 13;
}
.ball:nth-child(15) {
  --i: 14;
}
.ball:nth-child(16) {
  --i: 15;
}