Sassのmap-getとmap.getは何が違うのか
公開日:
結論
map-get
とmap.get
で言うと、map-get
の方が古くて、map.get
の方が新しいです。執筆時現状(バージョン1.58.3
)では両方使うことができますが、
おそらくこれからmap.get
を使うことが推奨されると思うのでそちらを使うようにした方がいいです。
関数の中身としてはどちらも全く同じものです。
詳細
調べてもあまり情報が出てこなかったので、ソースを直接見たらゴリゴリ文章で説明されていました。 以下は、ソースの該当部分の要約部分を読んで、噛み砕いて和訳したものです。 詳細を知りたい方は原文をどうぞ。
https://github.com/sass/sass/blob/main/accepted/module-system.md
雑和訳
私たちは新しいモジュールの仕組みを開発中だよ:grin:。それに伴って@import はいずれ非推奨となり、@use に置き換わるよ:kissing_smiling_eyes: 新しいシステムには以下の 7 つのモジュールが追加されるよ:sparkles:
math
color
string
list
map
selector
meta
そんで既存の Sass の関数は全てこいつらのモジュールが持つことになるぜ:sunglasses:。 こうやってモジュールを使って名前空間で分割することで新しい関数を追加する時とか何も考えずに済むでしょ!笑
要するに、Sass が新システム移行中でありmap-get
が既存の関数、map.get
は新しい新しいモジュールシステムに移行した関数ということです。
注意点
注意点としては、map-get
はグローバルに定義されている関数なので何も考えずに使うことができるのですが、
map.get
は以下のようにmap
モジュールを組み込まなければ使えません。
@use "sass:map"; // mapモジュールを使う
// 公式ドキュメントよりサンプルを引用: https://sass-lang.com/documentation/modules/map
$helvetica-light: (
"weights": (
"lightest": 100,
"light": 300
)
);
$helvetica-heavy: (
"weights": (
"medium": 500,
"bold": 700
)
);
@debug map.merge($helvetica-light, $helvetica-heavy);
// (
// "weights": (
// "medium: 500,
// "bold": 700
// )
// )
最後に
Sass
について少しだけ理解が深まったけれど、なあなあでやろうと思えばやれてしまうのでしっかりと勉強せねばなと思った。
では
Bye