我可以在 emotion-js 中使用 @for 循环，类似于 sass 中的 @for 吗？

Question

在 sass 如果我写：

@for $i from 1 through 3 li:nth-child(#{$i}) transition-delay: #{$i * 0.3}s

，我可以为每个列表元素获得一个很好的渐进式过渡延迟。

是否可以用 emotion-js 做到这一点？

Answer 1

好的，我想通了。

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

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

然后将其插入样式组件

const MenuList = styled.ul`
  &.expanded > li {
    transform: translateY(0);
    ${menuListTrans}
  }
`;

Answer 2

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

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

我可以在 emotion-js 中使用 @for 循环，类似于 sass 中的 @for 吗？

Can I use @for loop in emotion-js, similarly to @for in sass?

sass

emotion