【今日から携わる】フィボナッチ数列で設定するmargin・padding（今ならsassの設定も公開！）

突然ですが、margin・paddingの値を変数化してますか？

昔はいちいちpx指定でバッチリガッチリ固定幅な余白を再現していましたが、sassを使い、変数を使い、だんだん作り方が変わってきた今日このごろです。

.m{方向}-{大きさ}　：　マージン余白のつけかた
.p{方向}-{大きさ}　：　パディング余白のつけかた

昔の汎用クラスの書き方（余白）

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

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

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

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

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

.mx-10 {
    margin-left: 1rem !important;
    margin-right: 1rem !important; }

.my-10 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important; }

しかし、colissさんで下記の記事を見て考えが変わりました。
そしてsassで書こう！と。

margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法｜coliss

WEBの余白って、30px未満は細かく設定したほうがいいけれど、30pxを超える余白は5pxで刻まない方がいいこと多いですよね・・・。

ということで、最近のSass（scss）の余白の設定は以下のようになっております。

Sassの設定

最近の汎用クラスの書き方（余白）

$space-unit : 1rem !default; //16px
$margins : (
  "xxs": (0.25 * $space-unit), // 4px
  "xs": (0.5 * $space-unit), // 8px
  "sm": (0.75 * $space-unit), // 12px
  "md": (1.25 * $space-unit), // 20px
  "lg": (2 * $space-unit), // 32px
  "xl": (3.25 * $space-unit), // 52px
  "xxl": (5.25 * $space-unit), // 84px
  "0": ($space-unit * 0)
);

@each $size,$pixel in $margins {

  .m-#{$size} {
    margin:#{$pixel} !important;
  }

  .mt-#{$size} {
    margin-top:#{$pixel} !important;
  }

  .mr-#{$size} {
    margin-right:#{$pixel} !important;
  }

  .mb-#{$size} {
    margin-bottom:#{$pixel} !important;
  }

  .ml-#{$size} {
    margin-left:#{$pixel} !important;
  }

  .mx-#{$size} {
    margin-left:#{$pixel} !important;
    margin-right:#{$pixel} !important;
  }

  .my-#{$size} {
    margin-top:#{$pixel} !important;
    margin-bottom:#{$pixel} !important;
  }

  .p-#{$size} {
    padding:#{$pixel} !important;
  }

  .pt-#{$size} {
    padding-top:#{$pixel} !important;
  }

  .pr-#{$size} {
    padding-right:#{$pixel} !important;
  }

  .pb-#{$size} {
    padding-bottom:#{$pixel} !important;
  }

  .pl-#{$size} {
    padding-left:#{$pixel} !important;
  }

  .px-#{$size} {
    padding-left:#{$pixel} !important;
    padding-right:#{$pixel} !important;
  }

  .py-#{$size} {
    padding-top:#{$pixel} !important;
    padding-bottom:#{$pixel} !important;
  }
}

まとめ

margin・paddingの余白は、変数化・ルール化しましょう！
そのときのルールとして、フィボナッチ数列がおすすめです。