SCSSで超便利な幅調整クラスを作る

「ここだけピンポイントでマージンが欲しい」ときに便利な幅調整クラスを作る

HTML、CSSで画面コーディングをしていると、「ここだけピンポイントでマージンが欲しいんだよな」ってときがあると思います。
FLOCCSなどでクラス設計をしているときには「Utillity」という概念はありますが、SCSSファイルへの記述が面倒なので便利な幅調整クラスを作ります。

論よりコード

// 指定可能なmargin,paddingの範囲を定義
$adjust-min: 0;
$adjust-max: 120;

//幅調整用のstyleを作る関数
@for $i from $adjust-min through $adjust-max {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }

  .mr#{$i} {
    margin-right: #{$i}px !important;
  }

  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .ml#{$i} {
    margin-left: #{$i}px !important;
  }

  .pt#{$i} {
    padding-top: #{$i}px !important;
  }

  .pr#{$i} {
    padding-right: #{$i}px !important;
  }

  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }

  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}

幅調整したい要素のタグには以下のように記述します。

<div class="mt#16">これでmargin-top: 16px;が適用されます</div>

クラス名で「mt#16」(16は任意の数字)のように記載すると、関数が実行され、任意の数字のマージンを持ったstyleが生成されます。
そのstyleが、記載したクラス「mt#16」に適用されるので、結果として任意のmarginやpaddingが適用されます。

最後に

応用すると４方向のmarginやfont-sizeなどにも利用できますね。
ただし、使いすぎるとクラス設計がひどいことになりますので、用法用量を守りましょう。