Sass 访问嵌套数据的SCS
我试图弄清楚如何访问嵌套变量。我目前有如下情况:Sass 访问嵌套数据的SCS,sass,scss-mixins,Sass,Scss Mixins,我试图弄清楚如何访问嵌套变量。我目前有如下情况: @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
@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;
我知道我的代码是无效的,因为我得到了一个错误,并想知道它是否可能?我在谷歌上搜索,但还没有找到答案。您可以使用参数和语句:
@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);
}