我试图弄清楚如何访问嵌套变量。我目前有以下内容：
@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;
我知道我的代码无效，原因是我收到一个错误，并想知道是否可能？我正在谷歌搜索，但尚未找到答案。
您可以使用参数和@ 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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句