Могу ли я использовать @for l oop в эмоциях - js, аналогично @for в sass?

Question

В sass, если я напишу:

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

, я могу получить хорошую задержку прогрессивного перехода для каждого элемента списка.

Можно ли сделать это с эмоциями - js?

Answer 1

Хорошо, я понял это.

Сначала я создаю JS функцию, которая выполняет мой l oop, а затем возвращает стили как объект

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