Sass：for文で一定パターンのCSSを生成する

下記のような一定パターンの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;}