前回に引き続きSassで使えるテクニックの記事になります。Sassでは条件分岐や繰り返しの機能も用意されています。プログラミングでいうところのif文やfor文と同じような感じで、スタイルを設定することができます。今回はこの条件分岐と繰り返しを使って、汎用的に使える複数のスタイル用classを一度に自動生成する方法をまとめていきたいと思います。   今回はmarginを付与するclassを例に見ていきます。前提としてclass名に実際のmarginの値が入る命名方法で、3桁の数字で空きの桁はゼロパディングにしたいと思います。   まずはSassの方を見ていきます。変数ではmarginで増やしていく単位を設定しています。1つの場合は同じ間隔で増えていきますし、複数設定しておくことで途中で増減値を変化させることができます。 【Sass（SCSS）】

$unit-s: 5;
$unit-m: 15;
$unit-l: 30;
@for $i from 0 through 10 {
 @if $i < 2 {
  .mg-00#{$i * $unit-s} { margin: #{$i * $unit-s}px; }
 } @else if $i < 4 {
  .mg-0#{$i * $unit-s} { margin: #{$i * $unit-s}px; }
 } @else if $i < 7 {
  .mg-0#{($i - 2) * $unit-m} { margin: #{($i - 2) * $unit-m}px; }
 } @else if $i < 8 {
  .mg-0#{($i - 4) * $unit-l} { margin: #{($i - 4) * $unit-l}px; }
 } @else if $i > 8 {
  .mg-#{($i - 5) * $unit-l} { margin: #{($i - 5) * $unit-l}px; }
 }
}

  変数を設定したらforで繰り返しの記述をしていきます。繰り返しの中では、class名やmarginの値の増減値を変化させるための条件分岐をif elseを使って実現します。ここでは実際のclass命名ルールやmarginの値によってカスタマイズします。これをコンパイルするとCSSではこのような感じで書き出されます。 【CSS】

.mg-000 { margin: 0; }
.mg-005 { margin: 5px; }
.mg-010 { margin: 10px; }
.mg-015 { margin: 15px; }
.mg-030 { margin: 30px; }
.mg-045 { margin: 45px; }
.mg-060 { margin: 60px; }
.mg-090 { margin: 90px; }
.mg-120 { margin: 120px; }
.mg-150 { margin: 150px; }

  いかかでしょうか、今回はmarginを例にまとめてみましたが、paddingやfont-sizeなどいろんなプロパティで流用できるかと思います。CSSでは大量に記述しないといけないですし、変更する場合も数が多いと大変ですが、Sassの繰り返しと条件分岐を使えば、管理するときの工数も圧縮できますね。   （参考にさせて頂いたサイト） Sass：eachやforを使って繰り返し記述する手間を省く