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

WEB系フリーランスの備忘録

初心者の方なら、テンプレートで”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

めがねん
【4つの顔を持つ男】某一部上場企業で働きながら、独学で身につけたWEB制作・マーケティングのスキルを活かしてフリーランスの制作チームを率いています。独学方法に悩み遠回りをする方をサポートするために無料のオンラインサロン運営も。メンターとしても活動中🐶【発信内容】独学中にこそ知っておいてほしい情報を毎日詳しく発信⚡️