@for ループ用の変数名 from ループ開始値 though ループ終了値 {
  // ループ開始値 から ループ終了値以下まで繰り返す処理

}

@for ループ用の変数名 from ループ開始値 to ループ終了値 {
  // ループ開始値 から ループ終了値未満まで繰り返す処理

}

@forを使ってみよう

1. 「chapter04」 › 「for」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
2. 下記のsassのコードを変更する

// グリッド数の設定
$column: 12;

@for $i from 1 through $column {
  .grid--#{$i} {
    width: percentage($i / $column);
  }
}

3. 上書き保存
4. 「chapter04」 › 「for」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認

.grid--1 {
  width: 8.33333%;
}

.grid--2 {
  width: 16.66667%;
}

.grid--3 {
  width: 25%;
}

.grid--4 {
  width: 33.33333%;
}

.grid--5 {
  width: 41.66667%;
}

.grid--6 {
  width: 50%;
}

.grid--7 {
  width: 58.33333%;
}

.grid--8 {
  width: 66.66667%;
}

.grid--9 {
  width: 75%;
}

.grid--10 {
  width: 83.33333%;
}

.grid--11 {
  width: 91.66667%;
}

.grid--12 {
  width: 100%;
}

@whileもある

@for以外にも、@whileも使える。

@while ループ継続条件 {
  // 条件に一致する間、繰り返す処理

}

// ループ用変数の初期化
$i: 1;

@while $i <= 12 {
  .grid--#{$i} {
    width: percentage($i / 12);
    $i: $i + 1; // ループ用変数の増減
  }
}

配列名: 値1, 値2, 値3;

配列は「 （半角スペース）」、「( )（丸括弧）」で区切っても作成できる。

@each 値を取り出す変数名 in 配列名 {
  // 配列の要素の数だけ繰り返す

}

配列を使ってみよう

1. 「chapter04」 › 「list」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
2. 下記のsassのコードを記述する

// 配列の作成
$page-names: 'home' 'about' 'service';

// 配列のループ
@each $page-name in $page-names {
  .hero-#{$page-name} {
    background-image: url(../images/bg-#{$page-name}.png);
  }
}

3. 上書き保存
4. 「chapter04」 › 「list」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認

.hero-home {
  background-image: url(../images/bg-home.png);
}

.hero-about {
  background-image: url(../images/bg-about.png);
}

.hero-service {
  background-image: url(../images/bg-service.png);
}

連想配列 （マップ）も作れる

Sass3.3から、連想配列（マップ）も作れるようになった。

マップ名: (
  キー1: 値1,
  キー2: 値2,
  キー3: 値3
);

@each キーを取り出す変数名, 値を取り出す変数名 in 配列名 {
  // 配列の要素の数だけ繰り返す

}

// マップの作成
$gutters: (
  'small': .5em,
  'medium': 1em,
  'large': 1.5em,
  'xlarge': 2em
);

// マップの取り出し
@each $key, $val in $gutters {
  .u-mt--#{$key} {
    margin-top: $val;
  }
}

.u-mt--small {
  margin-top: 0.5em;
}

.u-mt--medium {
  margin-top: 1em;
}

.u-mt--large {
  margin-top: 1.5em;
}

.u-mt--xlarge {
  margin-top: 2em;
}

@function 関数名(引数) {
  // 関数として登録する処理
  @return 戻り値;
       省略可
}

引数は「,（半角カンマ）」区切りで複数指定可能（必要ない場合は省略も可能）

呼び出す関数名(引数);

独自関数を使ってみよう。

値を「px」から「em」に変換してくれる関数を作ってみよう。

1. 「chapter04」 › 「function」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
2. 下記のsassのコードを追加する

// 関数の登録
@function set-size($size, $base-font-size: 16px) {
  @return ($size / $base-font-size) * 1em;
}

.box {
  font-size: set-size(24px);
  padding: set-size(24px, 24px);
  margin: set-size(16px, 24px);
}

3. 上書き保存
4. 「chapter04」 › 「function」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認

.box {
  font-size: 1.5em;
  padding: 1em;
  margin: 0.66667em;
}