下記のような一定パターンのCSSを量産したい時にSassのfor文が役に立ちます。
.fs10 {font-size:10px;} .fs11 {font-size:11px;} .fs12 {font-size:12px;} ~ .fs20 {font-size:20px;}
これをSassのfor文で生成するなら下記になります。
@for $i from 10 through 20 { .fs#{$i} { font-size:#{$i}px; } }
$iが10から始まり20でfor文を終える形です。
Sassのfor文は「$iを5個ずつ進める」といった事はできず1ずつ進むので、下記のように計算を含めると5個ずつ進められます。
@for $i from 0 through 10 { .mg#{$i * 5} { margin:#{$i * 5}px; } .pd#{$i * 5} { padding:#{$i * 5}px; } }
こちらは下記のようにCSS出力されます。
.mg0 {margin:0px;} .pd0 {padding:0px;} .mg5 {margin:5px;} .pd5 {padding:5px;} .mg10 {margin:10px;} .pd10 {padding:10px;} ~ .mg50 {margin:50px;} .pd50 {padding:50px;}