【SASS】@forの便利な使い方を実例で解説｜toとthroughの違いやmarginやpadding、フォントサイズなどのCSSの簡単一括作成

SASS（.scss）には@forというディレクティブが用意されています。

@forを使うと、ループ処理を行い、少ない記述で大量のCSSを一括生成することができます。

ここでは@forの使い方を実例を用いて解説しています。

@forの使い方
1. 「through」:指定した値を含む
2. 「to」：指定した値を含まない
変数を呼び出す方法
1. 変数の値をプロパティの値として使用する
変数の値をセレクタや処理の途中で使う
marginの一括生成
1. htmlへの適用例
paddingの一括生成
1. htmlへの適用例
font-sizeの一括生成
1. htmlへの適用例

@forの使い方

@forを使うときは、終了する値の指定に、次の2種類の方法があります。

@forの終了値の指定方法

「through」:指定した値を含む（以下）。
「to」：指定した値を含まない（未満）。

「through」:指定した値を含む

終わりの値を「through」で指定すると、その値を含んだ値まで処理を繰り返します。

@for $変数名 from 初期値 through 終了値 {処理}

point

変数名には「$i」が使用されることが多いです。
初期値は「1」を指定することが多いです。

注意点

初期値と終了値は整数。
処理の中に変数を+1する処理は不要。ループ毎に自動で+1されていく。

通常は以下のように処理の部分を改行して使用します。

@for $i from 1 through 10 {
  処理
}

上記は、変数名を「$i」とし、最初「$i」の値は「1」から始まり、ループごとに「i」の値が＋１されていきます。「$i」の値が１０になるまで繰り返します。

すなわち、繰り返し回数は10回です。

「to」：指定した値を含まない

終わりの値を「to」で指定すると、指定した値未満まで処理を繰り返します。

@for $変数名 from 初期値 to 終了値 {処理}

注意点

初期値と終了値は整数。
処理の中に変数を+1する処理は不要。ループ毎に自動で+1されていく。

通常は以下のように処理の部分を改行して使用します。

@for $i from 1 to 10 {
  処理
}

上記は、変数名を「$i」とし、最初「$i」の値は「1」から始まり、ループごとに「i」の値が＋１されていきます。「$i」の値が９になるまで繰り返します。

すなわち、繰り返し回数は10回です。

point

「through」を使用した方が、指定した変数をどの値まで繰り返すかがわかりやすくなります。

変数を呼び出す方法

@forディレクティブの処理の中で変数を使用する前に、変数の基本的な使い方について触れておきます。（不要であれば読み飛ばしてください）

SASS変数を使用する方法は、どの場所にどのように呼び出すかで以下の2種類に分かれます。

@forの変数の呼び出し方

変数の値をプロパティの値として使用する。（または、四則演算で使う）
変数の値をセレクタや処理の途中で使う。

変数の値をプロパティの値として使用する

変数をプロパティの値として使用する場合は、変数名をそのまま記述することができます。

実例１

$slite-dark: #333;

.defalut-text {
  color: $slite-dark
}

　↓ コンパイル結果

.defalut-text {
  color: #333;
}

実例２：四則演算と単位を付ける

$oct: 8;

.small-text{
  font-size: $oct / 2 + px;
}

.large-test{
  font-size: $oct * 4 + px;
}

　↓ コンパイル結果

.small-text {
  font-size: 4px;
}

.large-test {
  font-size: 32px;
}

変数の値をセレクタや処理の途中で使う

変数をセレクタや処理の一部で呼び出すには#{ }を使って、その中で$変数名を使います。

実例

セレクタ名を「h#{$tri}」、font-sizeの値を「{$tri * 6}px」とすると以下のようになります。

$tri: 3;

h#{$tri}{
  font-size: #{$tri * 6}px;
}

　↓ コンパイル結果

h3 {
  font-size: 18px;
}

marginの一括生成

@forと上記の変数の呼び出しを併用すると、一定の間隔を持つmarginを一括生成することができます。

実例

例えば、8pxの間隔で、0～40pxまでの値を持った「margin」「margin-top」「margin-bottom」「margin-left」「margin-right」を一括で生成する場合は以下のようにします。

@for $i from 0 through 5 {
  .u-mt-#{$i} {
    margin-top: #{$i * 8}px !important;
  }
  .u-mb-#{$i} {
    margin-bottom: #{$i * 8}px !important;
  }
  .u-ml-#{$i} {
    margin-left: #{$i * 8}px !important;
  }
  .u-mr-#{$i} {
    margin-right: #{$i * 8}px !important;
  }
  .u-m-#{$i} {
    margin: #{$i * 8}px !important;
  }
}

「u-mt」の「u」はutilityレイヤーという意味です。

「mt」は「margin-top」という意味です。同様に、「mb」は「margin-bottom」、「ml」は「margin-left」、「mr」は「margin-right」、「m」は「margin」という意味です。

合わせて読みたい

ここでの命名規則はFLOCSSのルールに従っています。FLOCSSの詳細については下記をご参考ください。

【CSS・SASS】FLOCSS(フロックス)とは何か？命名規則やディレクトリ構造を実例で解説

上記のSASSをCSSにコンパイルすると以下のようになります。

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

.u-mb-0 {
  margin-bottom: 0px !important;
}

.u-ml-0 {
  margin-left: 0px !important;
}

.u-mr-0 {
  margin-right: 0px !important;
}

.u-m-0 {
  margin: 0px !important;
}

.u-mt-1 {
  margin-top: 8px !important;
}

.u-mb-1 {
  margin-bottom: 8px !important;
}

.u-ml-1 {
  margin-left: 8px !important;
}

.u-mr-1 {
  margin-right: 8px !important;
}

.u-m-1 {
  margin: 8px !important;
}

.u-mt-2 {
  margin-top: 16px !important;
}

.u-mb-2 {
  margin-bottom: 16px !important;
}

.u-ml-2 {
  margin-left: 16px !important;
}

.u-mr-2 {
  margin-right: 16px !important;
}

.u-m-2 {
  margin: 16px !important;
}

.u-mt-3 {
  margin-top: 24px !important;
}

.u-mb-3 {
  margin-bottom: 24px !important;
}

.u-ml-3 {
  margin-left: 24px !important;
}

.u-mr-3 {
  margin-right: 24px !important;
}

.u-m-3 {
  margin: 24px !important;
}

.u-mt-4 {
  margin-top: 32px !important;
}

.u-mb-4 {
  margin-bottom: 32px !important;
}

.u-ml-4 {
  margin-left: 32px !important;
}

.u-mr-4 {
  margin-right: 32px !important;
}

.u-m-4 {
  margin: 32px !important;
}

.u-mt-5 {
  margin-top: 40px !important;
}

.u-mb-5 {
  margin-bottom: 40px !important;
}

.u-ml-5 {
  margin-left: 40px !important;
}

.u-mr-5 {
  margin-right: 40px !important;
}

.u-m-5 {
  margin: 40px !important;
}

一瞬で大量のコードが生成されます。

なお、@for $i from 0 through 5の末尾の数値を変更すれば、その数値に合わせた回数だけループを繰り返すことができます。

htmlへの適用例

参考として生成したCSSのhtmlへの適用例も記載しておきます。

margin-top:24pxを適用したい場合は、クラス属性に「u-mt-3」を指定します。（3 * 8 = 24pxです）

<div class="u-mt-3">テスト</div>

paddingの一括生成

@forと上記の変数の呼び出しを併用すると、一定の間隔を持つpaddingを一括生成することができます。

実例

例えば、8pxの間隔で、0～40pxまでの値を持った「padding」「padding-top」「padding-bottom」「padding-left」「padding-right」を一括で生成する場合は以下のようにします。

@for $i from 0 through 10 {
  .u-pt-#{$i} {
    padding-top: #{$i * 8}px !important;
  }
  .u-pb-#{$i} {
    padding-bottom: #{$i * 8}px !important;
  }
  .u-pl-#{$i} {
    padding-left: #{$i * 8}px !important;
  }
  .u-pr-#{$i} {
    padding-right: #{$i * 8}px !important;
  }
  .u-p-#{$i} {
    padding: #{$i * 8}px !important;
  }
}

「u-pt」の「u」はutilityレイヤーという意味です。

「pt」は「padding-top」という意味です。同様に、「pb」は「padding-bottom」、「pl」は「padding-left」、「pr」は「padding-right」、「p」は「padding」という意味です。

合わせて読みたい

ここでの命名規則はFLOCSSのルールに従っています。FLOCSSの詳細については下記をご参考ください。

【CSS・SASS】FLOCSS(フロックス)とは何か？命名規則やディレクトリ構造を実例で解説

上記のSASSをCSSにコンパイルすると以下のようになります。

.u-pt-0 {
  padding-top: 0px !important;
}

.u-pb-0 {
  padding-bottom: 0px !important;
}

.u-pl-0 {
  padding-left: 0px !important;
}

.u-pr-0 {
  padding-right: 0px !important;
}

.u-p-0 {
  padding: 0px !important;
}

.u-pt-1 {
  padding-top: 8px !important;
}

.u-pb-1 {
  padding-bottom: 8px !important;
}

.u-pl-1 {
  padding-left: 8px !important;
}

.u-pr-1 {
  padding-right: 8px !important;
}

.u-p-1 {
  padding: 8px !important;
}

.u-pt-2 {
  padding-top: 16px !important;
}

.u-pb-2 {
  padding-bottom: 16px !important;
}

.u-pl-2 {
  padding-left: 16px !important;
}

.u-pr-2 {
  padding-right: 16px !important;
}

.u-p-2 {
  padding: 16px !important;
}

.u-pt-3 {
  padding-top: 24px !important;
}

.u-pb-3 {
  padding-bottom: 24px !important;
}

.u-pl-3 {
  padding-left: 24px !important;
}

.u-pr-3 {
  padding-right: 24px !important;
}

.u-p-3 {
  padding: 24px !important;
}

.u-pt-4 {
  padding-top: 32px !important;
}

.u-pb-4 {
  padding-bottom: 32px !important;
}

.u-pl-4 {
  padding-left: 32px !important;
}

.u-pr-4 {
  padding-right: 32px !important;
}

.u-p-4 {
  padding: 32px !important;
}

.u-pt-5 {
  padding-top: 40px !important;
}

.u-pb-5 {
  padding-bottom: 40px !important;
}

.u-pl-5 {
  padding-left: 40px !important;
}

.u-pr-5 {
  padding-right: 40px !important;
}

.u-p-5 {
  padding: 40px !important;
}

.u-pt-6 {
  padding-top: 48px !important;
}

.u-pb-6 {
  padding-bottom: 48px !important;
}

.u-pl-6 {
  padding-left: 48px !important;
}

.u-pr-6 {
  padding-right: 48px !important;
}

.u-p-6 {
  padding: 48px !important;
}

.u-pt-7 {
  padding-top: 56px !important;
}

.u-pb-7 {
  padding-bottom: 56px !important;
}

.u-pl-7 {
  padding-left: 56px !important;
}

.u-pr-7 {
  padding-right: 56px !important;
}

.u-p-7 {
  padding: 56px !important;
}

.u-pt-8 {
  padding-top: 64px !important;
}

.u-pb-8 {
  padding-bottom: 64px !important;
}

.u-pl-8 {
  padding-left: 64px !important;
}

.u-pr-8 {
  padding-right: 64px !important;
}

.u-p-8 {
  padding: 64px !important;
}

.u-pt-9 {
  padding-top: 72px !important;
}

.u-pb-9 {
  padding-bottom: 72px !important;
}

.u-pl-9 {
  padding-left: 72px !important;
}

.u-pr-9 {
  padding-right: 72px !important;
}

.u-p-9 {
  padding: 72px !important;
}

.u-pt-10 {
  padding-top: 80px !important;
}

.u-pb-10 {
  padding-bottom: 80px !important;
}

.u-pl-10 {
  padding-left: 80px !important;
}

.u-pr-10 {
  padding-right: 80px !important;
}

.u-p-10 {
  padding: 80px !important;
}/*# sourceMappingURL=test.css.map */

一瞬で大量のコードが生成されます。

なお、@for $i from 0 through 5の末尾の数値を変更すれば、その数値に合わせた回数だけループを繰り返すことができます。

htmlへの適用例

参考として生成したCSSのhtmlへの適用例も記載しておきます。

padding-top:24pxを適用したい場合は、クラス属性に「u-pt-3」を指定します。（3 * 8 = 24pxです）

<div class="u-pt-3">テスト</div>

font-sizeの一括生成

@forと上記の変数の呼び出しを併用すると、一定の間隔を持つfont-sizeを一括生成することができます。

実例

例えば、4pxの間隔で、4～80pxまでの値を持った「font-size」を一括で生成する場合は以下のようにします。

@for $i from 1 through 20 {
  .u-fs-#{$i} {
    padding-top: #{$i * 4}px;
  }
}

「u-fs」の「u」はutilityレイヤーという意味です。「fs」は「font-size」という意味です。

合わせて読みたい

ここでの命名規則はFLOCSSのルールに従っています。FLOCSSの詳細については下記をご参考ください。

【CSS・SASS】FLOCSS(フロックス)とは何か？命名規則やディレクトリ構造を実例で解説

上記のSASSをCSSにコンパイルすると以下のようになります。

.u-fs-1 {
  padding-top: 4px;
}

.u-fs-2 {
  padding-top: 8px;
}

.u-fs-3 {
  padding-top: 12px;
}

.u-fs-4 {
  padding-top: 16px;
}

.u-fs-5 {
  padding-top: 20px;
}

.u-fs-6 {
  padding-top: 24px;
}

.u-fs-7 {
  padding-top: 28px;
}

.u-fs-8 {
  padding-top: 32px;
}

.u-fs-9 {
  padding-top: 36px;
}

.u-fs-10 {
  padding-top: 40px;
}

.u-fs-11 {
  padding-top: 44px;
}

.u-fs-12 {
  padding-top: 48px;
}

.u-fs-13 {
  padding-top: 52px;
}

.u-fs-14 {
  padding-top: 56px;
}

.u-fs-15 {
  padding-top: 60px;
}

.u-fs-16 {
  padding-top: 64px;
}

.u-fs-17 {
  padding-top: 68px;
}

.u-fs-18 {
  padding-top: 72px;
}

.u-fs-19 {
  padding-top: 76px;
}

.u-fs-20 {
  padding-top: 80px;
}

一瞬で大量のコードが生成されます。