Sassで桁数を揃える関数を作成する

Sassの@forでループ処理を行う際、連番の数値は通常1,2,3のようになりますが、01,02,03や001,002,003など値の桁数を調整したいことがあるので、その実装方法をメモ。

サンプルコード

まずは@forで普通にループ処理を行なってみます。

@for $i from 1 through 20 {
  .test#{$i} {
    background-image: url(img#{$i}.jpg);
  }
}

出力結果は以下のようになります。

.test1 {
  background-image: url(img1.jpg);
}
.test2 {
  background-image: url(img2.jpg);
}
〜 略 〜
.test20 {
  background-image: url(img20.jpg);
}

次に数値の桁数を揃える関数を作成してみます。

@function adjust_digits($num, $digit: 2) {
  $no: ""+$num;
  @while str-length($no) < $digit {
    $no: "0"+$no;
  }
  @return $no;
}

$numに0以上の整数、$digitに桁数を指定します。
関数内の処理の仕組みは以前に作成したJavaScriptで桁数を揃える関数を作成すると同じです。

実際に関数を使ってみます。

@for $i from 1 through 20 {
  $no: adjust_digits($i, 2);
  .test#{$no} {
    background-image: url(img#{$no}.jpg);
  }
}

これで2桁の連番で出力することができました。

.test01 {
  background-image: url(img01.jpg);
}
.test02 {
  background-image: url(img02.jpg);
}
〜 略 〜
.test20 {
  background-image: url(img20.jpg);
}

関数の第二引数の値を変更することで、桁数の変更もできます。

@for $i from 1 through 20 {
  $no: adjust_digits($i, 5);
  .test#{$no} {
    background-image: url(img#{$no}.jpg);
  }
}

5桁の連番で出力できました。

.test00001 {
  background-image: url(img00001.jpg);
}
.test00002 {
  background-image: url(img00002.jpg);
}
〜 略 〜
.test00020 {
  background-image: url(img00020.jpg);
}