初めまして。エンジニアのsuganoです。
前職でもWEB制作に少しは携わらせて頂きましたが
フロントエンドエンジニアという専門職は初めてなので
とにかく毎日、毎日が勉強です。
勉強していると、いつも疑問や不明点にぶつかりますが
その分刺激を受けるので、その刺激が私のモチベーションになり
もっともっとスキルアップしたいと思う頃です！

では、今どんな勉強をしているのか
私は上司の勧めやコーディング作業の効率化をしたいと思い、
Sassについて勉強してみました。
その結果、便利な機能がたくさんあったので
その中から一つご紹介したいと思います。

@eachについて

皆さん、CSSで書く時に同じスタイルを何度も定義したり
プロパティの変更の修正が面倒だなぁと思う方、経験されていませんか？
特にページ数が多い時は修正＆追加がかなり大変ですよね、、、

そのよう場合は[@each]を使うと良いかもしれません★
他にも機能は沢山ありますが、今回は@eachについて紹介します。
@eachは繰り返しの処理を行う機能で
何度も修正せずに手軽に更新ができるんです！

CSSで面倒な時によくあるパターンから一つピックアップさせて頂きました。
背景画像をいちいち名前をコピーして貼り付けての繰り返しについて
これをSassソースで書いてみます！

まず、基本的な使い方は下記の通りです。

@each $変数 in リスト{…}

これを使って、こちらの3つのパターンを
Sassソースで作成してみたいと思います！
* それぞれのクラスに背景画像を指定したい
* 背景色を指定したい
* 背景画像と背景色を一緒に指定したい

それぞれのクラスに背景画像を指定したい場合

SASSソース

$classList: top, works, about;　//変数classListにカンマ区切りで複数指定

@each $class in $classList{
.#{$class}{　//変数を#{}で囲うことで、変数が参照できない場所でも使うことが出来るようになる機能
background:url(../images/bg_#{$class}.jpg) no-repeat 10px 10px;
}
}

CSSにコンパイル後　↓↓↓

.top {
background: url(../images/bg_top.jpg) no-repeat 10px 10px; }

.works {
background: url(../images/bg_works.jpg) no-repeat 10px 10px; }

.about {
background: url(../images/bg_about.jpg) no-repeat 10px 10px; }

あら、簡単！！
一つの関数を作るだけで、コーディングが楽になりましたね♫
@eachの利点としては
新しいクラスを追加されたとしても$classListの部分に
クラス名を追加するだけで、対応できるのでかなり便利です。

背景色を指定したい場合

次に、背景色を指定したい時はどんな感じになるだろうか？

SASSソース

$class-color:(
'top':#fff,
'works':#7f7f7f,
'about':#000
);

@each $class, $color in $class-color {
.#{$class} {
background-color: $color;
}
}

CSSにコンパイル後　↓↓↓

.top {
background-color: #fff; }

.works {
background-color: #7f7f7f; }

.about {
background-color: #000; }

今回の指定は３つだけ色をしているので、
わざわざ@each使うのは不要かもしれませんが
数多く指定したい場合は@eachを使うと管理が楽になるかもしれませんね。

背景画像と背景色を一緒に指定したい場合

背景画像と背景色を一緒に指定したい場合は

SASSソース

.$class-color:(
'top':#fff,
'works':#7f7f7f,
'about':#000
);

@each $class, $color in $class-color{
.#{$class} {
background:url(../images/bg_#{class}.jpg) no-repeat 10px 10px;
background-color:$color;
}
}

CSSにコンパイル後　↓↓↓

.top {
background: url(../images/bg_class.jpg) no-repeat 10px 10px;
background-color: #fff; }

.works {
background: url(../images/bg_class.jpg) no-repeat 10px 10px;
background-color: #7f7f7f; }

.about {
background: url(../images/bg_class.jpg) no-repeat 10px 10px;
background-color: #000; }

まとめ

このように、他にも@eachを使ったパターンが沢山ありますが
上記のような感じで簡単に処理することができます！
パターンさえ覚えてしまえば、
同じソースを書かなくてもSassソースがすっきりしますよね。
私自身もまだまだSassを完璧にマスターした訳ではないのですが
今後、使いこなせるように日々精進していきたいと思います。
この記事で少しでもSassに興味を持っていただけると嬉しいです。

ありがとうございました！