CSS(SCSS) @forを使ったインクリメント文でゼロパディングした連番の出し方

SCSSで@forをインクリメントして連番の記述をする時に

01〜10をインクリメントしたい場合下記のように

if文をネストすることで連番として出力できます。

#実現したいこと

下記のような連番を@forでインクリメントしたい

CSS

.con1{background-image: url(../img/index-main_1.jpeg);}
.con2{background-image: url(../img/index-main_2.jpeg);}
.con3{background-image: url(../img/index-main_3.jpeg);}
.con4{background-image: url(../img/index-main_4.jpeg);}
.con5{background-image: url(../img/index-main_5.jpeg);}
.con6{background-image: url(../img/index-main_6.jpeg);}
.con7{background-image: url(../img/index-main_7.jpeg);}
.con8{background-image: url(../img/index-main_8.jpeg);}
.con9{background-image: url(../img/index-main_9.jpeg);}
.con10{background-image: url(../img/index-main_10.jpeg);}

以下で動かそうとすると10個目は正しくコンパイルされません
10ではなく010でコンパイルされてしまうため

SCSS

@for $i from 1 through 10{
  .con#{$i}{
    background-image: url(../img/index-main_0#{$i}.jpeg);}
  }
}

//10個目は../img/index-main_010/jpegとコンパイルされてしまう

この場合はif文ネストして１桁と２桁で分岐します。

SCSS

@for $i from 1 through 10{
  @if $i < 10{
    .con#{$i}{
      background-image: url(../img/index-main_0#{$i}.jpeg);}
    }
  } @else {
    .con#{$i}{
      background-image: url(../img/index-main_#{$i}.jpeg);}
    }
  }
}

@forや@ifを使うと冗長なCSSをスッキリまとめられる場合もありますので
SCSSで記述する場合は積極的に取り入れていきましょう。
※使わないほうが可視性の高いこともあります。