Scss访问嵌套数据答案

【问题标题】：Scss accessing nested dataScss访问嵌套数据
【发布时间】：2021-02-05 17:03:32
【问题描述】：

我试图弄清楚如何访问嵌套变量。我目前有以下内容：

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

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

【问题讨论】：

标签： sass scss-mixins

【解决方案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);
}

【讨论】：