How to use sass map-get with sass syntax?

Question

I'm starting a project using sass and I prefer to write it in .sass syntax.

Also I would like to use the map feature in order to declare some key-value variables...

as the example:

$primary-colors: (
  "red":   "#ff0000",
  "green": "#00ff00",
  "blue":  "#0000ff"
);

/* Key and value together */
@each $color in $primary-colors {
  .thing {
    content: "#{$color}";
  }
}

/* Key and value separate */
@each $color-name, $color-code in $primary-colors {
  .color-#{$color-name} {
    background: $color-code;
  }
}

My issue is that I could not find how to write those map variables in .sass syntax.

I already tried something like:

$primary-colors: (
   "red": "#ff0000"
)

$example: map-get($primary-colors, "red")

And I get this error when I try to compile it:

Error: Illegal nesting: Nothing may be nested beneath variable declarations.

My sass version is:

Sass 3.4.11 (Selective Steve)

Does anyone know how to use it like .sass syntax?

Answer 1

Well, this is a problem which goes with .sass syntax as a free feature. You can join a discussion about it on github. But it's just a pointer to the well-known multiline-issue, and it is also discussed on github.

What you can do about that? Just use one-liners. And map-merge function for long declarations. Read about it in the docs.

$array: (1: '1', 2: '2', 3: '3')
$second_array: (4: '4', 5: '5')
$merged: map-merge($array, $second_array)

@each $num, $str in $merged
  .link-#{$str}
    z-index: $num

The output will be:

.link-1 { z-index: 1; }

.link-2 { z-index: 2; }

.link-3 { z-index: 3; }

.link-4 { z-index: 4; }

.link-5 { z-index: 5; }