【SCSS】Bootstrapにある例を参考に、SCSSでテンプレ化する

Bootstrap

Bootstrap公式サイトに載っていたコードを参考に、SCSSコードを作る。

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

SCSS

真似するとこうなる。

@for $i from 1 through 5 {
  .mt-#{$i} {
    margin-top: #{$i}em !important;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}em !important;
  }
  .pt-#{$i} {
    padding-top: #{$i}em !important;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}em !important;
  }
}

こうすると、mb-1とクラス付与するだけで、1em分のmargin-bottomを追加できる。

汎用クラスが使われていたりで、クラス指定が困難な時に使える。