@forで連番のclass名やサイズ指定のときに%指定での注意点【Sass】

連番のclass名やサイズ指定のスタイルを作成することがあると思いますが、そのときの単位を%で指定するときの注意点です。

連番のスタイル

連番のスタイルといっても様々ですが、よく以下のようなCSSをみることがあります。

.mt10 {
	margin-top: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

   ・
   ・
   ・
   ・

.mt90 {
	margin-top: 90px;
}

class名にしている数字がそのなにかのサイズの数値の場合です。

普通に書いていくと結構メンドーな作業だったりするのですが、Sassを使うとこういった場合、結構楽にできたりします。（正確にいうとCSS Preprocessorならどれでもよいです。）

@for $i from 1 through 9 {
	.mt#{$i * 10} {
		margin-top: #{$i * 10}px;
	}
}

上記のように書くと、.mt90までのclassができ、margin-topにそれぞれの番号が値として指定されます。

ここまででしたら、大したことはないのですが、注意しなければならない場合は、%での指定のときです。仮に以下のようにpxとemを指定したときは問題ありません。

@for $i from 1 through 9 {
	.w-#{$i * 10} {
		width: #{$i * 10}px;
	}
}

@for $i from 1 through 9 {
	.w-#{$i * 10} {
		width: #{$i * 10}em;
	}
}

では、%のときはどうでしょう。上記と同じように単位のところだけを変えて指定してしまうとエラーが起こります。

@for $i from 1 through 9 {
	.w-#{$i * 10} {
		width: #{$i * 10}%;
	}
}

「%は使えないの？」と思ってしまいますが、以下のように書くとエラーは起こりません。

@for $i from 1 through 9 {
	.w-#{$i * 10} {
		width: #{$i * 10 + "%"};
	}
}

これも実際は大したことではないのですが、意外とハマりポイントだったりするところなので、%指定のときだけエラーが起こった場合は、上記のような形で記述してみてください。