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;
}
}
Is it possible?
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()};
`
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With