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$ifrom1through10{.con#{$i}{background-image:url(../img/index-main_0#{$i}.jpeg);}}}//10個目は../img/index-main_010/jpegとコンパイルされてしまうこの場合はif文ネストして１桁と２桁で分岐します。
SCSS
@for$ifrom1through10{@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で記述する場合は積極的に取り入れていきましょう。
※使わないほうが可視性の高いこともあります。