【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制作を副業にできた人】 #30DAYSトライアル で独学 → CW営業 → 制作会社のパートナー → 制作チーム結成 → エンド営業|MENTAでメンターやってます。独学や営業の方法をお伝えしてます▶︎http://menta.work/plan/3110 |Twitterでは独学者向けに有益ツイートを拡散|犬が好きです。大好きです。