sass - Scss accessing nested data

Question

I'm trying to figure out how to access nested variables. I currently have something like the following:

@mixin password-reset-modal-props {
    color: map-deep-get($modal-settings, 'password-reset', 'header', 'color');
    font-size: map-deep-get($modal-settings, 'password-reset', 'header', 'font');
    font-family: 'Helvetica Neue Bold';
}

and accessed using:

@include password-reset-modal-props

I would like to use a nested variable so that I can group them together. I was thinking of something like:

@mixin password-reset-modal-props {
    header: {
        color: map-deep-get($modal-settings, 'password-reset', 'header', 'color');
        font-size: map-deep-get($modal-settings, 'password-reset', 'header', 'size');
        font-family: map-deep-get($modal-settings, 'password-reset', 'header', 'font');
    },
    label: {
        font-family: map-deep-get($modal-settings, 'password-reset', 'header', 'font');
    },
}

and access like this:

@include password-reset-modal-props.header;

I know my code is invalid cause I get an error and was wondering if its possible? I'm Googling but haven't found an answer yet.

question from:https://stackoverflow.com/questions/66056447/scss-accessing-nested-data

Answer 1

You can use a parameter and @if/@else statements:

@mixin password-reset-modal-props($element) {
    @if ($element == 'header') {
        color: map-deep-get($modal-settings, 'password-reset', 'header', 'color');
        font-size: map-deep-get($modal-settings, 'password-reset', 'header', 'size');
        font-family: map-deep-get($modal-settings, 'password-reset', 'header', 'font');

    } @else if ($element== 'label'){
        font-family: map-deep-get($modal-settings, 'password-reset', 'header', 'font');
    }
}

.test {
    @include password-reset-modal-props(header);
}