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

【问题标题】：Custom CSS variables with Sass indexing technique confusion?与 Sass 索引技术混淆的自定义 CSS 变量？
【发布时间】：2018-03-29 19:30:13
【问题描述】：

这里是代码链接，不太长，54行+HTML：

https://codepen.io/Yonkai/pen/YrdNqE?editors=0100

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

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

在上下文中，我不知道如何处理 --i (index) 自定义 CSS 变量或访问这些索引，如何通过动画中的每个调用来选择每个索引？（从 SASS 编译）：

.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;
}

我认为这与 calc() 或 var() 的功能以及自定义变量无关，但我真的傻眼了。

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

【问题讨论】：

标签： html css sass css-variables

【解决方案1】：

第 22 行是自定义变量 --m-ini。 --i 是另一个自定义变量，它的值在第 44 行设置。第 41 行是迭代声明，其中 $i 是从 1 到 16 的每次迭代，--i 被设置为 $i。

【讨论】：

好的，如果--i 被多次设置，--m-ini: calc(var(--i, 0) - #{$p}); 中的--i 指的是什么？我知道0 是什么都没有时的默认值。我很可能误解了整个设置。
--i 未在 --m-ini 声明中定义，因此使用默认值 0。 --i 正在迭代中更新。所以每个球 nth-child 对 --i 有不同的值，即迭代次数，在 state mixin translate 和 scale 函数中使用。