Sass:連番付きid・classをゼロパディング(ゼロ埋め)で出力する方法

Tips

Sass:連番付きid・classをゼロパディング(ゼロ埋め)で出力する方法

Sassを利用してて連番付きのidまたはclassを一気に出力したいときに、item1, item2, item3 ... のように単純に1から始まる連番をつけて出力するのではなく、item01, item02, item03 ... のようなゼロパディング(ゼロ埋め)な連番で出力させる方法です。

ゼロパディングとは、足りない桁数の分だけ「0」を追加して埋めるというもので、簡単な例で言うと1, 2, 3, 4, 5という数字の場合であっても桁数を2桁にする必要があるときは01, 02, 03, 04, 05にするというものになります。
今回はそのゼロパディングを、Sassで連番付きid・classを一気に出力したいときに適用させる方法を紹介します。

単純な連番付きで出力する

違いを見るために、まずは単純な連番付きで出力してみます。
今回はサンプルとして「item + 連番」のようなclassを出力するというもので、連番は1~10まで出したいという場合は@forを利用してSCSSへ下記のように記述します。

SCSS

@for $i from 1 through 10 {
  .item#{$i} {
    /* style */
  }
}

上記をコンパイルすると下記のように出力されます。

CSS

.item1 { /* style */ }
.item2 { /* style */ }
.item3 { /* style */ }
.item4 { /* style */ }
.item5 { /* style */ }
.item6 { /* style */ }
.item7 { /* style */ }
.item8 { /* style */ }
.item9 { /* style */ }
.item10 { /* style */ }

もちろんこれがいけないという訳ではないですが、例えばレギュレーションで「1~9の連番は頭に0をつける必要がある」となっていたり、HTMLをこちらで自由に変更することができず出力されているclassがゼロパディングになっているという場合などは、次で紹介する方法で解決することができます。

ゼロパディングを適用した連番付きで出力する

1~10までの連番付きclassを出力するが1~9まではゼロパディングを適用したいというときは、同じく@forを利用してSCSSへ下記のように記述します。

SCSS

$num: "";
@for $i from 1 through 10 {
  @if $i < 10 {
    $num: "0#{$i}";
  } @else {
    $num: $i;
  }
  .item#{$num} {
    /* style */
  }
}

先ほどと違う点としてはfor文の中に@ifを使った条件分岐を追記していて、10以下の場合とそうでない場合とで連番部分の出力内容を変更しています。
上記をコンパイルすると、先ほどとは違って下記のように1~9の連番は頭に0が付いて出力されます。

CSS

.item01 { /* style */ }
.item02 { /* style */ }
.item03 { /* style */ }
.item04 { /* style */ }
.item05 { /* style */ }
.item06 { /* style */ }
.item07 { /* style */ }
.item08 { /* style */ }
.item09 { /* style */ }
.item10 { /* style */ }

以上、Sassで連番付きのidやclassをゼロパディング(ゼロ埋め)で出力する方法でした。
今回のサンプルはclassとして出力する形になっていますが、ちょっと変更すれば連番付きの画像を背景画像として楽に指定できたりといろいろ使えるので、普段からゼロパディングを使っている場合は覚えておくと便利だと思います。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.