先週説明した カラーの配列 は Sass v3.3 から追加されたデータ型、map を使用したものです。
今回は map の使い方について、もう少し詳しく説明したいと思います。
目次
- map（連想配列）の操作の仕方
- まとめ
map（連想配列）の操作の仕方
前回使用した以下のカラー配列を利用します。
SCSS
[code]
$colors: (
red: #fc4741,
orange: #fd9b2e,
yellow: #fed533,
olive: #B5CC18,
green: #3bcf61,
teal: #00B5AD,
blue: #1c87fb,
violet: #5f61e3,
purple: #d483f2,
pink: #fc527b,
brown: #c8a578,
gray: #727e87,
salmon: #eab5af
);
[/code]
map-get($map,$key)
.sample の文字に特定のカラー（red）を指定する場合
[code]
.sample {
map-get($colors, red);
}
[/code]
map-has-key($map,$key)
$map の中に $key があるかどうかの真偽値を返す
[code]
map-has-key($colors, gold); //false
[/code]
ループ
[code]
@each $name, $value in $colors {
.bg-#{$name} {
background: $value;
}
}
.bg-red { background: #fc4741; }
.bg-orange { background: #fd9b2e; }
.bg-yellow { background: #fed533; }
…
すべての色名でクラスが作成される
[/code]
まとめ
map を利用しカラー管理をする場合、今回説明したものだけでも十分有用な機能だと思います。
map の値を merge したり delete することも可能ですが、width や height 、flex などの数値を利用し、複雑なレイアウトをプログラマブルに管理したい場合は別ですが、そもそもスタイルシートでそこまでやる必要があるかといえば疑問に感じます。
今後実用的な map の利用例が発生したら、そのときに説明したいと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
