ネストされたSASS変数へのアクセス方法は？この.scssファイルで

Question

いくつかの色は、次のような定義されています。

$colors: (
    primary : #cd0e11, 
    secondary: #23aa0b, 
    danger:  #f53d3d, 
    light:  #f4f4f4, 
    dark:  #222 
); 

私はそれらにアクセスするにはどうすればよいですか？プライマリに何かを設定したいとします。

私が試した：

h1 { 
color: $colors:primary 
} 

をこれはイオン2であるので、それはフレームワーク固有のものである可能性があります。

Answer 1

これはSASSマッピングと呼ばれています。次のように動作します。それはキーバリューフェッチャーのように機能します。

color: map-get($colors, primary) 

その詳細は、チェックアウトthis。

Answer 2

あなたはこれを試みることができる：あなたがマップを作成したら

h1 { 
    color: color($colors, primary); 
} 

Answer 3

は、関数はマップ-getを使用します（）。することもでき、必要に応じて各1をループ：https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184基本ドット構文は動作しませんなぜ私が疑問に思う

$map: (
color01: value, 
color02: nextValue, 
color03: thirdValue 
); 

.element { 
    content: map-get($map, color01); 
}