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

  • Posted on
  • Category : Tips
Sass:連番付きID・クラスをゼロパディング(ゼロ埋め)で出力する方法

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

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

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

違いを見るために、まずは単純な連番付きで出力してみます。
今回はサンプルとして「item + 連番」のようなクラスを出力するというもので、連番は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をこちらで自由に変更することができず出力されているクラスがゼロパディングになっているという場合などは、次で紹介する方法で解決することができます。

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

1~10までの連番付きクラスを出力するが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やクラスをゼロパディング(ゼロ埋め)で出力する方法でした。
今回のサンプルはクラスとして出力する形になっていますが、ちょっと変更すれば連番付きの画像を背景画像として楽に指定できたりといろいろ使えるので、普段からゼロパディングを使っている場合は覚えておくと便利だと思います。

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。