Scssで連想配列を扱う
この記事はにメンテナンスが行われています。
Scssでは連想配列を扱うことができ、そこまで複雑な使い方をせずともよくやるスタイリングが活用次第では楽になったりします。
例えば以下の画像の様な先頭にアイコンが付いたリストを作る時、連想配列を上手く活用すると分かりやすい記述でスタイリングすることが出来ます。
マークアップはざっとdl
で用意しておきます。
アイコンをdt
の疑似要素before
にてbackground-image
で読み込んで表示する場合、連想配列を活用すると以下の様な形で記述が出来ます。
上記の様に連想配列を活用するとアイコン特有の情報をまとめて持たせることができます。可読性も上がりますし、何よりコードが膨れないので見やすいのが特徴です。直感的に扱えるのも魅力ですよね。
ちなみに上記例では単純に連想配列の$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を書いていきたいですね。