我可以在情感js中使用@for循环，类似于在sass中使用@for吗？

在sass中，如果我写：

@从1到3的$i
李：第n个孩子（#{$i}）
转换延迟：#{$i*0.3}s

，我可以为每个列表元素获得一个很好的渐进转换延迟

---

有没有可能用情感js做到这一点？

好的，我已经想到了

首先，我创建一个JS函数，它执行循环，然后将样式作为对象返回

const menuListTrans = () => {
  let styles = {};
  for (let $i = 0; $i < 10; $i++) {
    styles["&:nth-child(" + $i + ")"] = {
      transitionDelay: "1s," + $i * 0.08 + "s",
    };
  }
  return styles;
};

---

这里是相同的方法，但有变量

export const nthChildDelay = ({ count = 10, delay = 100, multiplier = 80 }) => {
  const styles = {};
  [...Array(count).keys()].forEach((_, index) => {
    if (index !== 0) {
      styles[`&:nth-child(${index})`] = {
        transitionDelay: `${delay + (index - 1) * multiplier}ms`,
      };
    }
  });
  return styles;
};

然后将其用作

${nthChildDelay({ count: 10, delay: 100, multiplier: 100 })};

${nthChildDelay({ count: 10, delay: 100, multiplier: 100 })};