Sassで@forを使って繰り返し処理を行う

恥ずかしながらSassで最近@forを使いました。

forといえばJavaScriptやPHPで使うもんだと思ってましたが、Sassでも使えるようで、やってみました。

例として、<li>が10個あって、before要素に1～10の番号を振っていく場合です。

ol{
    @for $num from 1 through 10 {
        > li{
            &:nth-child(#{$num}){
                &::before{
                    content:'#{$num}';
                }
            }
        }
    }
}