トップへ戻る
BLOGS

SCSS 連想配列にまとめたデータをループで取り出す

SCSS 連想配列にまとめたデータをループで取り出す

SCSSは配列やいわゆるオブジェクトのような

データの塊を作ってまとめておくことが可能です

それにより必要な情報を一元管理したり、まとめて出力することで

管理面や、処理面で楽に記述できるようにします。

まずは連想配列を作成します。

$script_date: (
  'html': (
    icon: '\f13b',
    bg-color:#DC4B25,
    m-width: 90%
  ),
  'css': (
    icon: '\f13c',
    bg-color: #2763E9,
    m-width: 87%
  ),
  'js': (
    icon: '\f3b9',
    bg-color: #CDB22E,
    m-width: 21%
  ),
  'wordpress': (
    icon: '\f19a',
    bg-color: #541B8B,
    m-width: 63%
  ),
  'php': (
    icon: '\f457',
    bg-color: #7378AE,
    m-width: 30%
  ),
  'scss': (
    icon: '\f41e',
    bg-color: rgb(216, 26, 26),
    m-width: 41%
  ),
);

それぞれのプログラミング言語の中に

さらにフォントオーサムのアイコンや背景色、幅などを定義しておきました。

それではこちらをそれぞれ別に出力できるようにSCSSに記述していきましょう

@each $brand,$property in $script_date {
    .#{$brand}_bar::after {
      background-color: map-get($property, bg-color );
      max-width: map-get($property, m-width );
    }
  }

使用するのはいわゆるプログラミング言語で言う

foreach文

@each オブジェクトのキー,オブジェクトの値 in オブジェクト {この中で出力する}

として記述します

.#{$brand}_bar::afterの部分はCSSのセレクターになります

変数をセレクターで使用する際は#{}として中に変数を入れることで

エスケープして出力できます。

map-get( )関数は引数として

map-get(連想配列, キー名 )で取り出すことができるためこちらを使って中の要素を取得しています。

eachループ内でnth()を利用する例

連想配列の値が配列のデータを扱う場合は使用する関数が変わるためこちらもご紹介します

今度はSNSのデータをまとめてみます

$sns_list: (
  twitter: ("\f099", #fff, #00acee),
  fb     : ("\f09a", #fff, #3b5998),
  insta  : ("\f16d", #fff, #D93177),
  youtube: ("\f167", #fff, #cd201f)
);

SCSSはこちら

@each $site_name, $value in $sns_list{
    .sns-#{$site_name} a{
        background-color: nth($value, 3);
        &:before{
            content: nth($value, 1);
            color: nth($value, 2);
        }
    }
}

先程の例と親しいですね

nth(配列, インデックス番号)という形で渡す事で出力しています。

nth関数では、配列から指定したインデックス番号の値を返します。第1引数には配列を指定し、SCSSの配列なので左から1〜のインデックス番号を指定します。

これらをうまく使用することで

しっかりした、管理しやすいファイルを作ることができますね。

今回は以上です。

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA