【Sass】@forを使って余白調整用classを自動生成する方法

WEB系フリーランスの備忘録
平均読了時間→ < 1

初心者の方なら、テンプレートで”mt-5″とか”mb-10″などといったクラスを見掛けたことはありませんか?

あれは「余白調整用class」といって、”mt”はmargin-top、”mb”はmargin-bottomのことを指しており、上の例でいうとそれぞれmargin-top: 5px; と margin-bottom: 10px; などといった意味になります。

つまりは、簡単に各要素の余白を調整するために用意されるものということですね。

しかし、毎回いちいちCSSで”mt-0″から”mt-50″まで書くのはアホらしいので(書いたことならある)、どうにかしてこれを簡単に用意できないかなと調べまくった初心者時代の僕がたどり着いたのがSassでした。

ということで、とりあえず答えとなるサンプルコードを置いておきますね。

$spaceClass: true !default;
$spacePadding: true !default;
$endValue: 10 !default;

@if $spaceClass {
 @for $i from 0 through $endValue {
  .mt#{$i * 5} {
   margin-top: 5px * $i !important;
   }
   .mb#{$i * 5} {
    margin-bottom: 5px * $i !important;
   }
    @if $spacePadding {
     .pt#{$i * 5} {
    padding-top: 5px * $i !important;
    }
    .pb#{$i * 5} {
     padding-bottom: 5px * $i !important;
    }
   }
 }
}

こうすることで、コンパイル後にmargin-top・margin-bottom・padding-top・paddig-bottomの余白調整用classが、それぞれ0px~50pxまで5px単位で自動生成されます。

いちいちCSSでちまちまとコーディングする時間から解放されましょう。

ABOUT US

めがねん
Web制作を学び、自由度の高い個人を増やすための情報を発信中|高卒サラリーマン→完全独学→独学方法をブログに書いてプチバズる→独学者向けの無料サロン設立→メンターになる→Webコンサルになる|独学方法に悩むあなたのための方向性コンサルはこちら▶︎http://menta.work/plan/3110|犬が好きだワン🐶