Nuxt.js + styled-componentsで開発をしているのですが、SCSSのような感じで、
SCSS
ol { @for $i from 0 through 10 { li:nth-child(#{$i + 1}) { &:before { content: '#{$i}'; } } } }
こちらをstyled-componentsに書き換えてみると、
styled-components
const ol = styled.ol` ${() => { let styles = ''; for (let i = 0; i < 10; ++i) { styles += ` li:nth-child(${ i + 1 }) { &:before { content: '${ i }'; } } `; } return css`${ styles }`; }} `;
こんな感じになるかと思います。
CSS単独でみると正直SCSSの方がシンプルで書きやすいのですが、styled-componentsはJavaScriptとCSSで変数を使いまわしやすいのが大きな利点となります。