Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

突然ですが、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
スクリーンショット 2019-01-26 1.42.44.png

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の余白は、変数化・ルール化しましょう!
そのときのルールとして、フィボナッチ数列がおすすめです。

abeno
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away