我试图在 styled-components 文档中找到一种方法来创建一个循环。例如，我可以scss在样式组件中实现这个循环吗？
@for $i from 0 through 20 {
#loadingCheckCircleSVG-#{$i} {
animation: fill-to-white 5000ms;
animation-delay: ($i - 1.5) * 1s;
fill: white;
opacity: 0;
}
}
是否可以？
我们目前不支持来自 scss 的迭代语法。但是，由于 styled-components 接受 JS 插值，您只需编写一个简单的 JS 函数来制作所需的 CSS 并将其放入。
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()};
`