sass - How do I access a specific element of a mapping?

Question

I have the following mapping to contain all of the colours from my theme:

$_base-ocean:rgb(13,176,184);
$_base-hover:10%;

$themes: (
    ocean: (
        base: $_base-ocean,
        hover: darken($_base-ocean, $_base-hover)
    )
);

I know how to use an @each loop to get the key/value information from a mapping, but how can I directly access the value of a mapping without using a loop? I tried using square brackets like you would in other languages like JavaScript:

@each $name, $colors in $themes {
    [data-page="home"] {
        #slider-pagers{
            a.#{$name} {
                background-color: $colors[base]; // <- line 21
            }
        }
    }
}

But I get a syntax error instead:

 error sass/test.scss (Line 21: Invalid CSS after "...d-color: $color": expected ";", was "[base];")

Answer 1

You have the use the map-get function. Sass does not provide a special syntax for accessing values of a mapping.

@each $name, $colors in $themes {
    [data-page="home"] {
        #slider-pagers{
            a.#{$name} {
                background-color: map-get($colors, base);
            }
        }
    }
}

Now you get the following output:

[data-page="home"] #slider-pagers a.ocean {
  background-color: #0db0b8;
}