Zugriff auf verschachtelte SASS-Variablen?

Question

Mehrere Farben in dieser .scss Datei sind als solche definiert:

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

Wie kann ich darauf zugreifen? Sagen wir, ich möchte etwas auf die primäre setzen.

Ich habe versucht:

h1 { 
color: $colors:primary 
} 

Diese Ionic 2, so könnte es ein Rahmen für spezifische Sache sein.

Answer 1

Ich fand heraus, das heißt SASS-Mapping. Folgendes wird funktionieren. Es funktioniert wie ein Schlüsselwert-Fetcher.

color: map-get($colors, primary) 

prüfen this darauf für weitere Informationen aus.

Answer 2

Sie konnten dieses versuchen:

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

Answer 3

Sobald Sie die Karte zu erstellen, verwenden die Funktionskarte-get(). Sie können bei Bedarf auch durch jede Schleife: 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); 
}