仕事

ママコーダーの備忘録!Scss基本テクニック#2 @eachで繰り返しをスッキリさせる

ごじゃっぺ

ママコーダーの備忘録!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が役立つ場面は多いと思いますので、ぜひ活用して行きましょう!

お仕事のご依頼・ご相談はWaM(ワム)まで

制作メンバーはこちら!

制作メンバーのイラスト

家庭を持つママやパパといった
様々な事情を抱えたメンバーたちで
WaMサイトの運営を行っています。

少しでもママにとって働きやすく、
そして不安を取り除けるように、
私たち目線で情報を発信していきます。

ページトップへ戻る