Sassのmap-getとmap.getは何が違うのか

公開日: 

結論

map-getmap.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モジュールを組み込まなければ使えません。

sample.scss
@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