1. TOP
  2. HTML / CSS
  3. 【サンプルコードあり】margin, paddingのutilityクラスをSASSで作成する方法
詳しくはこちら
HTML / CSS

【サンプルコードあり】margin, paddingのutilityクラスをSASSで作成する方法

SASSを使って、utilityクラスの値違いのmargin, paddingクラスを一気に生成する方法を紹介します。今回のサンプルコードはSass記法ですが、もちろんScss記法でも使えます。

ちなみに、以下のようなクラスがutilityクラスです。主にFLOCSSなどで用いる手法です。

// margin-top: 50px; padding-left: 20px のユーティリティクラス
<dic class="u-mt50 u-pl20">
...
</div>

SASSを使わないでutilityクラスを定義しようとすると、値を5刻みにしたとしてもかなりの量の記述が必要です。

// 記述量が果てしない...
.u-mt5 { margin-top: 5px }
.u-mt10 { margin-top: 10px }
.u-mt15 { margin-top: 15px }
・
・
・
.u-mt100 { margin-top: 100px }
・
・
・
.u-ml5 { margin-left: 5px }
.u-ml10 { margin-left: 10px }
.u-ml15 { margin-left: 15px }

しかし、SASSを使うことでとてもスマートに、汎用性の高い書き方ができるようになります。今回はいくつかのシチュエーションに分けて解説していきます。

基本形

mixinで定義して、それを呼び出すことで柔軟なコードになります。

// mixin定義
// @param $class クラス名
// @param $property プロパティ名
=create-space-class($class, $property)
  @for $i from 0 through 100
    @if $i % 5 == 0
      #{$class + $i}
        #{$property}: #{$i}px

// mixin呼び出し
+create-space-class('.u-mt', 'margin-top')

では、一行ずつ解説していきます。

=create-space-class($class, $property)では2つの引数を設定できるようにしています。1つ目はクラス名、2つ目はプロパティになります。

@for $i from 0 through 100では0から100までの繰り返しをfor文で実行。次の行の@if $i % 5 == 0でfor文の0から100までのうち5の倍数の時のみ、次の行の処理を実行するようにしています。@if $i % 5 == 0 and $i % 6 == 0のようにすれば、5と6の倍数にもできます。

#{$class + $i}では$classには引数で設定したクラス名が、$iには繰り返しの数が入ります。同様に#{$property}: #{$i}pxでは$propertyには引数で設定したプロパティ名が、$iには繰り返しの数が入ります。

先程のコードの場合、0から100のうち、0と5の倍数の値のmargin-topのクラスが生成されます。

.u-mt0 { margin-top: 0; }
.u-mt5 { margin-top: 5px; }
.u-mt10 { margin-top: 10px; }
・
・
・
.u-mt95 { margin-top: 95px; }
.u-mt100 { margin-top: 100px; }

レスポンシブ対応

まずはメディアクエリ用のmixinを作ります。

=max-screen($breakPoint)
  @media screen and (max-width: $breakPoint)
    @content

このmixinを使ってレスポンシブに対応したutilityクラスを作ります。

// 通常時
+create-space-class('.u-mt', 'margin-top')

// 768px以下
+max-screen(768px)
  +create-space-class('.u-md-mt', 'margin-top') // mdはmediumの略

上下or左右に対応させる

最初に作ったmixinだとmargin-topmargin-leftのように一方向のスタイルは作れますが、margin: 0 10pxのような両方向のスタイルは作れません。これに対応するには、少しmixinをカスタマイズしてあげます。

// mixin定義
// @param $class クラス名
// @param $property プロパティ名
// @param $double 上下or左右にスタイルを適用させる場合、上下なら'y'、左右なら'x'を与える(省略可)
=create-space-class($class, $property, $double: false)
  @for $i from 0 through 100
    @if $i % 5 == 0
      #{$class + $i}
        @if($double == false)
          #{$property}: #{$i}px
        @else if($double == 'x' and $i > 0)
          #{$property}: 0 #{$i}px
        @else if($double == 'y' and $i > 0)
          #{$property}: #{$i}px 0

// mixin呼び出し
+create-space-class('.u-mx', 'margin', 'x')

3つ目の引数に方向を定義する値を追加して、その値がある時のみスタイルの出力方法をif文で制御しています。

横方向ならxを、縦方向ならyを3つ目の引数に与えます。また、呼び出し時に3つ目の引数を省略できるように、引数の初期値も設定しています。

ちなみに+create-space-class('.u-mx', 'margin', 'x')のように呼び出すと、以下のようになります。

.u-mx5 { margin: 0 5px; }
.u-mx10 { margin: 0 10px; }
・
・
・
.u-mx95 { margin: 0 95px; }
.u-mx100 { margin: 0 100px; }

margin, padding全部のせ

margin, paddingの上・下・左・右・上下・左右と、メディアクエリバージョンの全部乗せパターンです。mixinは「上下or左右に対応させる」バージョンを使います。

+create-space-class('.u-mt', 'margin-top')
+create-space-class('.u-ml', 'margin-left')
+create-space-class('.u-mr', 'margin-right')
+create-space-class('.u-mb', 'margin-bottom')
+create-space-class('.u-mx', 'margin', 'x')
+create-space-class('.u-my', 'margin', 'y')
+create-space-class('.u-pt', 'padding-top')
+create-space-class('.u-pl', 'padding-left')
+create-space-class('.u-pr', 'padding-right')
+create-space-class('.u-pb', 'padding-bottom')
+create-space-class('.u-px', 'padding', 'x')
+create-space-class('.u-py', 'padding', 'y')

+max-screen(768px)
  +create-space-class('.u-md-mt', 'margin-top')
  +create-space-class('.u-md-ml', 'margin-left')
  +create-space-class('.u-md-mr', 'margin-right')
  +create-space-class('.u-md-mb', 'margin-bottom')
  +create-space-class('.u-md-mx', 'margin', 'x')
  +create-space-class('.u-md-my', 'margin', 'y')
  +create-space-class('.u-md-pt', 'padding-top')
  +create-space-class('.u-md-pl', 'padding-left')
  +create-space-class('.u-md-pr', 'padding-right')
  +create-space-class('.u-md-pb', 'padding-bottom')
  +create-space-class('.u-md-px', 'padding', 'x')
  +create-space-class('.u-md-py', 'padding', 'y')

関連記事