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

Question

In sass if I write:

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

, I can get a nice progressive transition delay for each list element.

Is it possible to do this with emotion-js ?

Answer 1

Okay I have figured it.

First I create a JS function, which does my loop and then returns the styles as an object

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

and then interpolate it in the styled component

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