styled-components에서 for문 돌리기

styled-components에서 각 엘리먼트에 animation을 적용하려다 for문 코드에 대해 알아보았다.

const createCSS = () => {
  let str = "";
  for (let i = 1; i < 30; i++) {
    str += `
            &:nth-of-type(${i}) {
                transform: translate3d(${random(190) - 100}px, ${
      random(200) - 100
    }px, 0) rotate(${random(360)}deg);
                background: hsla(${random(360)}, 100%, 50%, 1);
            }
        `;
  }
  return str;
};

export const Container = styled.div`
  ${I} {
    ${createCSS()}
    animation: ${bang} 700ms ease-out forwards;
  }
`;

for문을 포함한 함수를 따로 만들어서 return 시켜야 한다.

for문 안에서는 animation css를 작성하면 에러가 나므로 빠로 빼주어야 한다.

@for loops in styled-components
Loop nth-child in styled component