How to access nested SASS variables?

Question

Several colors in this .scss file are defined as such:

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

How do I access them? Say I want to set something to primary.

I tried:

h1 {
color: $colors:primary
}

This is Ionic 2, so it could be a framework specific thing.

Answer 1

I found out this is called SASS mapping. The following will work. It works like a key value fetcher.

color: map-get($colors, primary)

Check this out for more info on it.

Answer 2

You could try this:

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