SCSSの@forをstyled-componentsで書き換える 🔁

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で変数を使いまわしやすいのが大きな利点となります。