样式组件中的@for循环 [英] @for loops in styled-components

问题描述

我试图在样式化组件文档中找到一种方法来创建循环.例如，我可以在样式化组件中实现此 scss 循环吗?

I am trying to find a method in the styled-components documentation to create a loop. For example can I achieve this scss loop in styled-components?

@for $i from 0 through 20 {
  #loadingCheckCircleSVG-#{$i} {
    animation: fill-to-white 5000ms;
    animation-delay: ($i - 1.5) * 1s;
    fill: white;
    opacity: 0;
  }
}

有可能吗?

推荐答案

我们目前不支持来自scss的迭代语法.但是，由于样式化组件接受JS插值，因此您只需编写一个简单的JS函数即可制作所需的CSS并将其放入.

We don't have support for iteration syntaxes from scss at this time. However, since styled-components accepts JS interpolations, you can just write a simple JS function to make the desired CSS and drop it in.

import styled, { css } from "styled-components";

function createCSS() {
  let styles = '';

  for (let i = 0; i < 20; i += 1) {
     styles += `
       #loadingCheckCircleSVG-${i} {
         animation: fill-to-white 5000ms;
         animation-delay: ${i - 1.5}s;
         fill: white;
         opacity: 0;
       }
     `
  }

  return css`${styles}`;
}

const Thing = styled.div`
  ${createCSS()};
`

这篇关于样式组件中的@for循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！