【Sass】@forを使って余白調整用classを自動生成する方法

初心者の方なら、テンプレートで”mt-5″とか”mb-10″などといったクラスを見掛けたことはありませんか？

あれは「余白調整用class」といって、”mt”はmargin-top、”mb”はmargin-bottomのことを指しており、上の例でいうとそれぞれmargin-top: 5px;　と　margin-bottom: 10px; などといった意味になります。

つまりは、簡単に各要素の余白を調整するために用意されるものということですね。

しかし、毎回いちいちCSSで”mt-0″から”mt-50″まで書くのはアホらしいので（書いたことならある）、どうにかしてこれを簡単に用意できないかなと調べまくった初心者時代の僕がたどり着いたのがSassでした。

ということで、とりあえず答えとなるサンプルコードを置いておきますね。

$spaceClass: true !default;
$spacePadding: true !default;
$endValue: 10 !default;

@if $spaceClass {
 @for $i from 0 through $endValue {
  .mt#{$i * 5} {
   margin-top: 5px * $i !important;
   }
   .mb#{$i * 5} {
    margin-bottom: 5px * $i !important;
   }
    @if $spacePadding {
     .pt#{$i * 5} {
    padding-top: 5px * $i !important;
    }
    .pb#{$i * 5} {
     padding-bottom: 5px * $i !important;
    }
   }
 }
}

こうすることで、コンパイル後にmargin-top・margin-bottom・padding-top・paddig-bottomの余白調整用classが、それぞれ0px～50pxまで5px単位で自動生成されます。

いちいちCSSでちまちまとコーディングする時間から解放されましょう。