copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2018/08/17

@each 繰り返しの処理を行う機能

Written by Yusuke Sugano

  • SASS

INDEX

    初めまして。エンジニアの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; }
    

    今回の指定は3つだけ色をしているので、
    わざわざ@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に興味を持っていただけると嬉しいです。

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

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View