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

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

コード

$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じゃない方は以下だけコピペして使ってください。

.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ディレクティブ ) の中で変数を使う時の罠 - かもメモ