Sassってみよう!〜@for @while編〜

@for@while

今回は@for、@whileのループ処理についてです。
私が個人的に一番「Sassを使っていてよかった〜」としみじみ思う機能です。
cssだと大量にコピペして書いていたコードもループ処理を用いると数行の記述で済むので仕事が捗ります。

@forの使い方

それでは早速、@forの基本的な使い方からみていきましょう。
@forは繰り返しの処理ができる機能です。
設定の方法は@forの後に変数を宣言しfromthroughtの後に繰り返す範囲の数値を指定し、{ }内の宣言ブロックにて設定した変数を用いて繰り返すスタイルを記述していきます。

@for $変数 from 開始値 through 終了値 {
  宣言ブロック
}

では、具体的な使い方をみてみましょう。
プロジェクトによってはフォントサイズなどのclassをまとめて設定しておいて、html側にclass付けすることによってスタイリングする事もあるかと思います。
そんな時、@forを用いれば簡単にスタイルセットを作成できます。
例えば、フォントサイズを14px〜18pxまでをまとめて設定したい場合。
以前ご紹介した#{}(インターポレーション)を用います)

@for $var from 14 through 18 {
  .fs#{$var} {
    font-size: #{$var}px;
  }
}

cssにコンパイル後 ↓

.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs17 { font-size: 17px; }
.fs18 { font-size: 18px; }

例では14px〜18pxになっていますが、
極端な話、1px〜100pxでも一瞬で出来てしまいますね。

@whileの使い方

同じく@whileも繰り返しの処理ができる機能です。
基本的な使い方は、@whileの後に繰り返しの条件式を記述し、
{ }内の宣言ブロックにスタイルを記述します。

@while 条件式 {
  宣言ブロック	
}

では、具体的な使用例を@forと同じ場合でみてみましょう。

$var: 14;  // ←変数を宣言
@while $var <= 18 { // ←変数が18になるまで繰り返し
  .fs#{$var} {
    font-size: #{$var}px;
  }
  $var: $var + 1;  // ←変数の値に1足して最初に戻る
}

cssにコンパイル後 ↓

.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs17 { font-size: 17px; }
.fs18 { font-size: 18px; }

その他、便利な使い方

リストに個別の画像を設定する

:nth-child()擬似クラスでリストに個別の番号を指定していきます。
画像表示には:before疑似要素を用います。

@for $var from 1 through 4 {
  li:nth-child(#{$var}):before {
    content: url("list-num#{$var}.png");
  }
}

cssにコンパイル後 ↓

li:nth-child(1):before {
  content: url("list-num1.png");
}
li:nth-child(2):before {
  content: url("list-num2.png");
}
li:nth-child(3):before {
  content: url("list-num3.png");
}
li:nth-child(4):before {
  content: url("list-num4.png");
}

上記例では:before疑似要素を用いてますが、もちろん背景画像で設定する場合も方法は同じです。

一定間隔で変数を増減させる

上記までの例では変数の値を1ずつ増加させていますが、
演算子と組み合わせると自在な増減が可能です。
以下では5px間隔でマージンを作成してみます。

@whileを用いた場合

0から50までの間、変数に5ずつ足していきます。

$var: 0;
@while $var <= 50 {
  .mb#{$var} {
    margin-bottom: #{$var}px;
  }
  $var: $var + 5;
}

@for使用の場合

0から10までの間、変数に5を掛けていきます。

@for $var from 0 through 10 {
  .mb#{$var * 5} {
    margin-bottom: 5px * $var;
  }
}

いずれの場合も
cssにコンパイル後 ↓同じ結果になります。

.mb0 { margin-bottom: 0px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }

プレースホルダーを使用する

上記までの方法では、余分なスタイルも書き出されてしまします。
cssだけで運用する場合はそれでもいいのですが、せっかくSassを使っているので、以前ご紹介した@extendと%「プレースホルダー」を使用して、無駄なスタイルの生成をなくしましょう。

@for $var from 0 through 10 {
  %mt#{$var * 5} {
    margin-top: 5px * $var;
  }
  %mb#{$var * 5} {
    margin-bottom: 5px * $var;
  }
}
.box1 {
 @extend %mt10;
}
.box2 {
 @extend %mb30;
}

cssにコンパイル後 ↓

.box1 {
  margin-top: 10px;
}
.box2 {
  margin-bottom: 30px;
}

このように@extendで継承したスタイルのみ生成されます。

【第1回】インストール編 【第2回】コンパイル編 【第3回】ネスト編 【第4回】変数編 【第5回】@extend編 【第6回】@mixin編 【第7回】@import編 【第8回】@for@while編 【第9回】@each @if @function編

SNSでもご購読できます。