仕事
ママコーダーの備忘録!Scss基本テクニック#2 @eachで繰り返しをスッキリさせる
ごじゃっぺ
同じスタイルでもアイコンだけを変えたり、背景色だけを変えたりする場合がありますよね。その場合、繰り返し同じスタイルを記述しても良いですが、パターンが多くなればなるほど大変になります。そんなときは@eachを使ってループ処理させれば、コードをスッキリさせることができます。今回は@eachを使ったループ処理の例をご紹介します。
スタイルは同じ、だけどアイコン画像だけ変えたい。そんな時!
上の画像ののように、スタイルは同じ、だけどアイコン画像だけ変えたい。そういう場合、どうしていますか?
@eachを使用せずに記述した場合
スタイルは同じでもアイコン画像が異なるので、カテゴリごとにアイコン画像の指定を変える必要があり、Scssは以下のような記述になると思います。
.articleCategory {
&--work {
background: url("../images/img-category-work.png") no-repeat 50% 100%; }
&--home {
background: url("../images/img-category-home.png") no-repeat 50% 100%; }
&--life {
background: url("../images/img-category-life.png") no-repeat 50% 100%; }
}
ですが、もしカテゴリが10個も20個もたくさんあったとしたら、その数分だけコードを羅列しなくてはなりません。
@each使用して記述した場合
@eachを使えば、コードを羅列することなくスッキリさせることができます。
Scssは以下のような記述になります。
//配列にカテゴリタイトルを入れる
$catetitle:work,home,life;
//@eachでカテゴリ数だけループ処理する
.articleCategory {
@each $title in $catetitle {
&--#{$title}{
background: url("../images/img-category-#{$title}.png") no-repeat 50% 100%;
}
}
}
まずカテゴリタイトルを配列に入れます。
@eachを使い配列から1つずつ値を取り出して、配列の中身の数だけ処理をループします。
1つずつ取り出した値を、それぞれのカテゴリを指すモディファイヤ、画像ファイル名に指定します。(あらかじめ、モディファイヤ、画像名を揃えておく必要があります。)
もし新たにカテゴリが増えた場合、配列にカテゴリタイトルを追加するだけで済みます。カテゴリが増えても、スッキリさせることができます。
コンパイル後のCSSは以下の通りです。
.articleCategory--work {
background: url("../images/img-category-work.png") no-repeat 50% 100%; }
.articleCategory--home {
background: url("../images/img-category-home.png") no-repeat 50% 100%; }
.articleCategory--life {
background: url("../images/img-category-life.png") no-repeat 50% 100%; }
まとめ
いかがでしたか?
同じソースのコピペを繰り返さなくてよいので、コードがスッキリします。が膨大なときは、この@eachを使ったループ処理が必須といえます。
@eachが役立つ場面は多いと思いますので、ぜひ活用して行きましょう!