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

Scss 访问嵌套数据

Scss accessing nested data

sass

scss-mixins