More than 3 years have passed since last update.

Dart Sass 使用時のmap.getの使い方について

Posted at 2021-10-26

##　Dart Sass 使用時のmap.getの使い方について

###マップ型の呼び出しは map-get から map.get へ

get-mapから、map.getに変更されたので使用方法についてのメモ。

自分の使用方法は、「FLOCSS」をベースに、変数settinng用のファイルを作り、それを参照している。

sass(変数管理用ファイル)

@use "sass:map";

$layer: (
  drawer: 40,
  sp-menu: 30,
  header: 20,
  default:1,
)

@use "sass.map" を記入してあげる。

sass(変数を呼び出しているファイル)

@use "../global/" as global;
@use "sass:map";

.l-header {
    z-index: map.get(global.$layer, header) ;
}

@use "../global/";で変数を管理しているパーシャルの指定をします。
ファイル名は名前空間となって、実際に指定したい箇所でパーシャル名.変数名と続けて記述します。
コチラにも@use "sass.map" を記入。

ここで

map.get(パーシャル名.$layer, キー)

css

.l-header {
  z-index: 20;
}

これで使えた。