Sassを使った効率的CSSコーディング術

3-2. ループ処理(each・for・while)で繰り返し記述する手間を省く

プログラミング用語に「ループ処理」というものがあります。これは何か決まった処理を繰り返し行うことを命令するというものです。Sassを使えば、ループ処理によって同じようなCSSを繰り返し記述する手間を省くことができます。

  • HTML・CSS

公開日:2019/06/14最終更新日:2019/06/14

スポンサーリンク

1.@eachで配列の個数分、繰り返し処理を行う

1つの変数の中に、複数の値を入れたものを「配列」といいます。たとえばsizeという変数の中に3つの値を入れてみましょう。値は「,(カンマ)」で区切ります。

$sizes: 40px, 50px, 80px;

そして「@each」を使うと、この配列の個数分、繰り返しの処理をすることができます。

@each $変数 in $配列{
  //繰り返しの処理内容を書く
  width: $size;
}

実際に使ってみましょう。

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

コンパイルします。

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

2.@forで決めた回数分、繰り返し処理を行う

@forを使うと、指定した回数分だけ繰り返しの処理を行うことができます。.box1、.box2、.box3…と連続したクラスに対してプロパティ・値を指定するというような場合に利用できます。

@forの書き方です。

@for $i from 開始値 through 終了値 {
  .box#{$i} {
    font-size:#{$i}px;
  }
}

開始値と終了値の箇所には数字が入ります。たとえば1〜3というふうにすると、.box1、.box2、.box3というふうにクラスが出力されます。つまり変数「i」のところに数字が入り、繰り返されると1ずつ増えていくということです。

`#{$i}`というのは編集を文字列として出力する際の記述方法です。

では実際の例を見てみましょう。以下のサンプルでは、関数lighten()で少しずつ色を変化させています。

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

コンパイルします。

ul:nth-child(3n + 1) {
  background-color: #004080;
}

ul:nth-child(3n + 2) {
  background-color: #004d99;
}

ul:nth-child(3n + 3) {
  background-color: #0059b3;
}

3.@whileで条件式にもとづいて、繰り返し処理を行う

@whileを使うと@forより柔軟に繰り返し処理が行えます。@whileのあとに条件式を記述し、条件を満たさなくなるまで何度も繰り返し処理を行います。

@while 条件式{
  // 繰り返し処理
}

@forと違い、繰り返しが起きても変数に変化は起きません。そのため繰り返し処理の内容には変数+1などの演算処理を記述しておきます。

14px・16px・18pxと、2pxずつ違うフォントサイズを出力してみます。

$var: 14;
@while $var <= 18 {
  .fs#{$var} {
    font-size: #{$var}px;
  }
  $var: $var + 2; 
}

コンパイル結果です。

.fs14 {
  font-size: 14px;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

 

ループ処理(each・for・while)と、条件分岐(if)を組み合わせると、さらに工夫が加えられます。次のレッスンで解説します。

理解度チェック

スポンサーリンク

このレッスンの著者