sassでmargin, paddingのhelperクラスを作る

margin, paddingのhelperクラスはBootstrapにはあるけどBulmaにはない。
あとBootstrapのも個人的には微妙に使い勝手が悪い。
ということで今までにもいろんなプロジェクトでいろんな書き方してきたけど今後も使い回せるように残しておきます。

## コード

``` sass
$max: 3
$frac-max: 1
$default-unit: 'rem'
$props: (m: margin, p: padding)
$directions: (t: top, b: bottom, l: left, r: right)

@for $i from 0 through $max
  $unit: if($i == 0, '', $default-unit)

  @each $p-short, $p-full in $props
    .#{$p-short}-#{$i}
      #{$p-full}: #{$i}#{$unit}!important

    @each $d-short, $d-full in $directions
      .#{$p-short}#{$d-short}-#{$i}
        #{$p-full}-#{$d-full}: #{$i}#{$unit}!important

// 0.25単位
@for $i from 0 through $frac-max
  @for $n from 1 through 3
    $num: 0.25 * $n
    $label: if($num == 0.5, '5', $num * 100)

    @each $p-short, $p-full in $props
      .#{$p-short}-#{$i}_#{$label}
        #{$p-full}: #{$i + $num}#{$default-unit}!important

      @each $d-short, $d-full in $directions
        .#{$p-short}#{$d-short}-#{$i}_#{$label}
          #{$p-full}-#{$d-full}: #{$i + $num}#{$default-unit}!important

```

## 使い方
普段`padding`や`margin`は`em`や`rem`で指定するのでその仕様で作っています。
細かく使い分けられるように`0.25`単位のクラスも作りました。
そこまで細かくなくていい場合はコメント以下を削除してください。
ループを組み込んでしまえばもっと共通化して短くできるけど、切り離したいこともありそうなので分けました。

今回は出力されるcssも掲載するため`$max`を3にしていますが、プロジェクトでは10くらいまで作ります。
ゆったりとしたレイアウトで広めのスペースが必要になることが結構あるためです。
一方0.25単位クラスの上限`$frac_max`は`1`か`2`で十分かなと思います。
`margin-bottom: 5.75rem`とか指定することはほぼないと思いますし・・・

## アウトプット
以下のようになります。
Sasserじゃない方は以下だけコピペして使ってください。

``` css

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.m-1 {
  margin: 1rem !important;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.ml-1 {
  margin-left: 1rem !important;
}

.mr-1 {
  margin-right: 1rem !important;
}

.p-1 {
  padding: 1rem !important;
}

.pt-1 {
  padding-top: 1rem !important;
}

.pb-1 {
  padding-bottom: 1rem !important;
}

.pl-1 {
  padding-left: 1rem !important;
}

.pr-1 {
  padding-right: 1rem !important;
}

.m-2 {
  margin: 2rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.ml-2 {
  margin-left: 2rem !important;
}

.mr-2 {
  margin-right: 2rem !important;
}

.p-2 {
  padding: 2rem !important;
}

.pt-2 {
  padding-top: 2rem !important;
}

.pb-2 {
  padding-bottom: 2rem !important;
}

.pl-2 {
  padding-left: 2rem !important;
}

.pr-2 {
  padding-right: 2rem !important;
}

.m-3 {
  margin: 3rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.ml-3 {
  margin-left: 3rem !important;
}

.mr-3 {
  margin-right: 3rem !important;
}

.p-3 {
  padding: 3rem !important;
}

.pt-3 {
  padding-top: 3rem !important;
}

.pb-3 {
  padding-bottom: 3rem !important;
}

.pl-3 {
  padding-left: 3rem !important;
}

.pr-3 {
  padding-right: 3rem !important;
}

.m-0_25 {
  margin: 0.25rem !important;
}

.mt-0_25 {
  margin-top: 0.25rem !important;
}

.mb-0_25 {
  margin-bottom: 0.25rem !important;
}

.ml-0_25 {
  margin-left: 0.25rem !important;
}

.mr-0_25 {
  margin-right: 0.25rem !important;
}

.p-0_25 {
  padding: 0.25rem !important;
}

.pt-0_25 {
  padding-top: 0.25rem !important;
}

.pb-0_25 {
  padding-bottom: 0.25rem !important;
}

.pl-0_25 {
  padding-left: 0.25rem !important;
}

.pr-0_25 {
  padding-right: 0.25rem !important;
}

.m-0_5 {
  margin: 0.5rem !important;
}

.mt-0_5 {
  margin-top: 0.5rem !important;
}

.mb-0_5 {
  margin-bottom: 0.5rem !important;
}

.ml-0_5 {
  margin-left: 0.5rem !important;
}

.mr-0_5 {
  margin-right: 0.5rem !important;
}

.p-0_5 {
  padding: 0.5rem !important;
}

.pt-0_5 {
  padding-top: 0.5rem !important;
}

.pb-0_5 {
  padding-bottom: 0.5rem !important;
}

.pl-0_5 {
  padding-left: 0.5rem !important;
}

.pr-0_5 {
  padding-right: 0.5rem !important;
}

.m-0_75 {
  margin: 0.75rem !important;
}

.mt-0_75 {
  margin-top: 0.75rem !important;
}

.mb-0_75 {
  margin-bottom: 0.75rem !important;
}

.ml-0_75 {
  margin-left: 0.75rem !important;
}

.mr-0_75 {
  margin-right: 0.75rem !important;
}

.p-0_75 {
  padding: 0.75rem !important;
}

.pt-0_75 {
  padding-top: 0.75rem !important;
}

.pb-0_75 {
  padding-bottom: 0.75rem !important;
}

.pl-0_75 {
  padding-left: 0.75rem !important;
}

.pr-0_75 {
  padding-right: 0.75rem !important;
}

.m-1_25 {
  margin: 1.25rem !important;
}

.mt-1_25 {
  margin-top: 1.25rem !important;
}

.mb-1_25 {
  margin-bottom: 1.25rem !important;
}

.ml-1_25 {
  margin-left: 1.25rem !important;
}

.mr-1_25 {
  margin-right: 1.25rem !important;
}

.p-1_25 {
  padding: 1.25rem !important;
}

.pt-1_25 {
  padding-top: 1.25rem !important;
}

.pb-1_25 {
  padding-bottom: 1.25rem !important;
}

.pl-1_25 {
  padding-left: 1.25rem !important;
}

.pr-1_25 {
  padding-right: 1.25rem !important;
}

.m-1_50 {
  margin: 1.5rem !important;
}

.mt-1_50 {
  margin-top: 1.5rem !important;
}

.mb-1_50 {
  margin-bottom: 1.5rem !important;
}

.ml-1_50 {
  margin-left: 1.5rem !important;
}

.mr-1_50 {
  margin-right: 1.5rem !important;
}

.p-1_50 {
  padding: 1.5rem !important;
}

.pt-1_50 {
  padding-top: 1.5rem !important;
}

.pb-1_50 {
  padding-bottom: 1.5rem !important;
}

.pl-1_50 {
  padding-left: 1.5rem !important;
}

.pr-1_50 {
  padding-right: 1.5rem !important;
}

.m-1_75 {
  margin: 1.75rem !important;
}

.mt-1_75 {
  margin-top: 1.75rem !important;
}

.mb-1_75 {
  margin-bottom: 1.75rem !important;
}

.ml-1_75 {
  margin-left: 1.75rem !important;
}

.mr-1_75 {
  margin-right: 1.75rem !important;
}

.p-1_75 {
  padding: 1.75rem !important;
}

.pt-1_75 {
  padding-top: 1.75rem !important;
}

.pb-1_75 {
  padding-bottom: 1.75rem !important;
}

.pl-1_75 {
  padding-left: 1.75rem !important;
}

.pr-1_75 {
  padding-right: 1.75rem !important;
}

```

## おしまい
変数のスコープに結構つまづきました。
あとif関数というのを初めて知りました。
使いやすい！
しかしSassの公式ドキュメントってなんか見にくい・・・😓

## 参考
[Sass if文 ( @ifディレクティブ ) の中で変数を使う時の罠 - かもメモ](https://chaika.hatenablog.com/entry/2019/05/28/160000)