Scssで連想配列を扱う

Scssでは連想配列を扱うことができ、そこまで複雑な使い方をせずともよくやるスタイリングが活用次第では楽になったりします。

例えば以下の画像の様な先頭にアイコンが付いたリストを作る時、連想配列を上手く活用すると分かりやすい記述でスタイリングすることが出来ます。

マークアップはざっとdlで用意しておきます。

<dl>
  <dt class="atlassian">Atlassian</dt>
  <dd>アトラシアン (Atlassian) は、オーストラリアのシドニーに本社を置くソフトウェア</dd>
</dl>
<dl>
  <dt class="windows">Windows</dt>
  <dd>Microsoft Windows（マイクロソフト ウィンドウズ）は、マイクロソフトが開発・販</dd>
</dl>
<dl>
  <dt class="swift">Swift</dt>
  <dd>Swift（スウィフト）は、アップルのiOSおよびmacOS､Linuxで利用出来るプログ</dd>
</dl>
<dl>
  <dt class="react">React</dt>
  <dd>React（リアクト）は、Facebookとコミュニティによって開発されているユーザイン</dd>
</dl>
<dl>
  <dt class="apple">Apple</dt>
  <dd>アップル（英: Apple Inc.）は、アメリカ合衆国カリフォルニア州に本社を置く、イン</dd>
</dl>
<dl>
  <dt class="android">Android</dt>
  <dd>Android（アンドロイド）は、Googleが開発したモバイルオペレーティングシステ</dd>
</dl>

アイコンをdtの疑似要素beforeにてbackground-imageで読み込んで表示する場合、連想配列を活用すると以下の様な形で記述が出来ます。

// アイコンの名称と高さ、横幅の情報を持たせてあげる.
$icons: (
    atlassian: (
        height: 24,
        width: 26
    ),
    windows: (
        height: 24,
        width: 26
    ),
    swift: (
        height: 21,
        width: 24
    ),
    react: (
        height: 24,
        width: 28
    ),
    apple: (
        height: 27,
        width: 22
    ),
    android: (
        height: 32,
        width: 28
    )
);

dl {
    dt {
        @each $icon, $sizes in $icons {
            &.#{$icon}:before {
                background-image: url(../images/ico--#{$icon}.svg);
            }

            @each $vh, $size in $sizes {
                &.#{$icon}:before {
                    #{$vh}: #{$size}px;
                }
            }
        }

        &:before {
            background-size: cover;
            content: '';
        }
    }
}

上記の様に連想配列を活用するとアイコン特有の情報をまとめて持たせることができます。可読性も上がりますし、何よりコードが膨れないので見やすいのが特徴です。直感的に扱えるのも魅力ですよね。

ちなみに上記例では単純に連想配列の$keyと$valueからアイコンを出すという処理だけの簡易的なものでしたが、Scssではデフォルトで組み込み関数にmap操作が可能な関数が存在します。

• map-get($map, $key)
• map-merge($map1, $map2)
• map-remove($map, $keys…)
• map-keys($map)
• map-values($map)
• map-has-key($map, $key)
• keywords($args)

これら関数は特別な事せずにデフォルトで利用可能です。上手いこと利用して破綻しづらいScssを書いていきたいですね。