コンパイル後のCSS
仕事にて、最終的に以下のようなCSSになるsassを書きたいとします。
.class0-0 {
width: 0.0px;
}
.class0-1 {
width: 0.1px;
}
.class0-2 {
width: 0.2px;
}
.class0-3 {
width: 0.3px;
}
.class0-4 {
width: 0.4px;
}
.class0-5 {
width: 0.5px;
}
.class0-6 {
width: 0.6px;
}
.class0-7 {
width: 0.7px;
}
.class0-8 {
width: 0.8px;
}
.class0-9 {
width: 0.9px;
}
.class1-0 {
width: 1.0px;
}
.class1-1 {
width: 1.1px;
}
.class1-2 {
width: 1.2px;
}
.class1-3 {
width: 1.3px;
}
.class1-4 {
width: 1.4px;
}
.class1-5 {
width: 1.5px;
}
.class1-6 {
width: 1.6px;
}
.class1-7 {
width: 1.7px;
}
.class1-8 {
width: 1.8px;
}
.class1-9 {
width: 1.9px;
}
.class2-0 {
width: 2.0px;
}
.class2-1 {
width: 2.1px;
}
.class2-2 {
width: 2.2px;
}
.class2-3 {
width: 2.3px;
}
.class2-4 {
width: 2.4px;
}
.class2-5 {
width: 2.5px;
}
.class2-6 {
width: 2.6px;
}
.class2-7 {
width: 2.7px;
}
.class2-8 {
width: 2.8px;
}
.class2-9 {
width: 2.9px;
}
.class3-0 {
width: 3.0px;
}
.class3-1 {
width: 3.1px;
}
.class3-2 {
width: 3.2px;
}
.class3-3 {
width: 3.3px;
}
.class3-4 {
width: 3.4px;
}
.class3-5 {
width: 3.5px;
}
.class3-6 {
width: 3.6px;
}
.class3-7 {
width: 3.7px;
}
.class3-8 {
width: 3.8px;
}
.class3-9 {
width: 3.9px;
}
.class4-0 {
width: 4.0px;
}
.class4-1 {
width: 4.1px;
}
.class4-2 {
width: 4.2px;
}
.class4-3 {
width: 4.3px;
}
.class4-4 {
width: 4.4px;
}
.class4-5 {
width: 4.5px;
}
.class4-6 {
width: 4.6px;
}
.class4-7 {
width: 4.7px;
}
.class4-8 {
width: 4.8px;
}
.class4-9 {
width: 4.9px;
}
.class5-0 {
width: 5.0px;
}
- classの前の数字は、0から始まり、10回繰り返したら、1増えます
- classの後の数字は、0から9まで1づつ増えるを繰り返します
これを51回繰り返したいとします。さて、どう書きますか？先輩のコードが勉強になったので、記録しておこうと思いました。
結論
はじめに、sassから書いていきます。
@for $i from 0 through 50 {
$v1: floor($i / 10);
$v2: $i % 10;
.class#{$v1}-#{$v2} {
width: #{$v1 + "." + $v2}px;
}
}
$v1の行の説明
$v1にくるのは、
- 0が10回
- 1が10回
- 2が10回
- 3が10回
- 4が10回
- 5が1回
の51回の繰り返しができればOKです。
$v1: floor($i / 10);
floorは、小数点以下を切り下げます。四捨五入ではなく切り下げなので、0.9でも0とします。
- 0.0でも1
- 0.1でも1
- 0.2でも1
- 0.3でも1
・・・省略
- 0.8でも1
- 0.9でも1
で、0が10回を実現しています。最初の、@for $i from 0 through 50で、51回繰り返すこととしているので、5は1回だけの実行で終わります（51回目の実行なので）。
$v2の行の説明
$v2にくるのは、
- 0 % 10 = 0
- 1 % 10 = 1
・・・省略
- 9 % 10 = 9
- 10 % 10 = 0
- 11 % 10 = 1
・・・省略
- 41 % 10 = 1
という感じで、（0,1,2,3...9）が5１回繰り返されます。
- 0回目は（
0 % 10 = 0）なので、結果は0 - 51回目は（
50 % 10 = 0）なので、結果は0
という感じになります。
試したい方へ
ここで、sassをリアルタイムでコンパイルされますので
@for $i from 0 through 50 {
$v1: floor($i / 10);
$v2: $i % 10;
.class#{$v1}-#{$v2} {
width: #{$v1 + "." + $v2}px;
comment: #{$i + 1}回目 // これは分かりやすくするためのコメントです
}
}
6行目は、実際にcssとしてコンパイルする際は消しておきましょう。今回は、何回目かをしるためにつけただけです。
実際の画像↓
以上です！