SASS - access multi dimensional map

Question

I am trying to access the next level of a multi-dimensional map but struggling to know how to get hold of the values.

I have the sizings of columns, separated by language version which will determine the width and height of some list items.

Code extract of the data here:

$columns: (
    en: (
        1: (
            height: 416px,
            width: 374px
        ),
        2: (
            height: 416px,
            width: 204px
        ),
        3: (
            height: 416px,
            width: 286px
        )
    ),
    it: (
        1: (
            height: 416px,
            width: 374px
        ),
        2: (
            height: 416px,
            width: 204px
        ),
        3: (
            height: 416px,
            width: 286px
        )
    )
);

I am then trying to loop through each of the languages, then by id to access the width and height attribute.

@for $i from 1 through length($columns) {
    $language: nth(map-keys($columns), $i);
    $height: map-get(map-get($columns, $language), 'height');
    $width: map-get(map-get($columns, $language), 'width');

    @for $j from 1 through 3 {
        .#{$language} [data-id="#{$j}"] .tile__content {
            background-image: url('images/#{$language}/#{$j}.png');
            height: $height;
            width: $width;
        }
    }
}

I have no idea how to access the next level down, the background image works fine. Can anyone help me get the height and width attributes out?

Answer 1

You have quite an interesting structure over here. The main mistake you've done lies in the lines:

$height: map-get(map-get($columns, $language), 'height');
$width: map-get(map-get($columns, $language), 'width');

with this you were getting height and weight one step too early. map-get($columns, $language) returns an inner map, which is returning this:

(
        1: (
            height: 416px,
            width: 374px
        ),
        2: (
            height: 416px,
            width: 204px
        ),
        3: (
            height: 416px,
            width: 286px
        )
    )

so you height and width are non existent at this level.

Solution:

@for $i from 1 through length($columns) {
    /* Get language key (e.g.: en) */
    $language: nth(map-keys($columns), $i);

    /* From original map, get the map for particular language
       (e.g.: 1: (...), 2: (...), 3: (...)) */
    $language_map: map-get($columns, $language);

    /* Iterate over language map */
    @for $j from 1 through length($language_map) {
        /* get the item from language (height: ..., weight: ...)*/
        $item: map-get($language_map, $j);
        $height: map-get($item, 'height');
        $width: map-get($item, 'width');

        .#{$language} [data-id="#{$j}"] .tile__content {
            background-image: url('images/#{$language}/#{$j}.png');
            height: $height;
            width: $width;
        }
    }
}