Scss访问嵌套数据

Question

我正在尝试弄清楚如何访问嵌套变量。我目前有一些类似以下的东西：

@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';
}

并使用以下方式访问：

@include password-reset-modal-props

我想使用一个嵌套变量，这样我就可以将它们组合在一起。我在想像这样的东西：

@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');
    },
}

并像这样访问：

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

我知道我的代码是无效的，因为我得到了一个错误，并想知道这是否可能？我在谷歌上搜索，但还没有找到答案。

Answer 1

您可以使用参数和@if/@else语句：

@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);
}