1.@forと@ifを組み合わせて、繰り返しのパターンを変える
@forで繰り返しを行い、その中に@ifで条件分岐をさせると、繰り返しのパターンを途中で切り替えながら出力することができます。
サンプルのコードです。12回繰り返し、最初の4つ・途中の4つ・最後の4つで出力される色が切り替わります。
@for$i from 1 through 12 {
@if $i <= 4 {
.item-#{$i}{
color: red;
}
}@else if $i <= 8 {
.item-#{$i} {
color: green;
}
}@else {
.item-#{$i} {
color: blue;
}
}
}
コンパイル結果です。
.item-1 { color: red; }
.item-2 { color: red; }
.item-3 { color: red; }
.item-4 { color: red; }
.item-5 { color: green; }
.item-6 { color: green; }
.item-7 { color: green; }
.item-8 { color: green; }
.item-9 { color: blue; }
.item-10 { color: blue; }
.item-11 { color: blue; }
.item-12 { color: blue; }
2.@eachと@forを組み合わせて、ループ処理を入れ子状に使う
ループ処理も組み合わせると複雑な繰り返しを出力することができます。
サンプルのコードです。グリッド風のカラムをスマホとPCで分けて出力します。
$column: 5;
@each $breakpoint in sp, pc {
@for $i from 1 through $column {
.col-#{$breakpoint}-#{$i} {
width: percentage($i / $column);
}
}
}
コンパイル結果です。
.col-sp-1 { width: 20%; }
.col-sp-2 { width: 40%; }
.col-sp-3 { width: 60%; }
.col-sp-4 { width: 80%; }
.col-sp-5 { width: 100%; }
.col-pc-1 { width: 20%; }
.col-pc-2 { width: 40%; }
.col-pc-3 { width: 60%; }
.col-pc-4 { width: 80%; }
.col-pc-5 { width: 100%; }
3.@mixinや@function内で使うとより便利に
ここまで紹介してきた@if・@each・@for・@whileは@mixinや@functionの中で使うと、実力を発揮します。
パズルを組み合わせる感覚で、どんな工夫ができるかいろいろ考えてみましょう。
次のレッスンからは、コーディングの現場でよく使われる@mixinをまとめて紹介します。
