less.js
less.js copied to clipboard
How to dynamically access a specific object within a variable and iterate over it
@theme-color-value: { @light: { @page-name: { color: #df3232; }
@modal-name: {
color: #7ac13c;
}
}
// 对应某个主题 @dark: {
// 对应某个模块的颜色
@page-name: {
color: #166ad0;
}
@modal-name: {
color: #a51575;
}
} }
@theme-color: { @page-name: { text-color-primary: 10%; bg-color: 10%; text-color-secondary: 100%; }
@modal-name: { text-color-primary: 10%; bg-color: 10%; text-color-secondary: 100%; } }
.ccc { color: @theme-color[@page-name][text-color-primary]; }
@color-property: text-color-primary;
.ccc {
// color:~"@{theme-color[@{page-name}][@{color-property}]}";
}
each(@theme-color-value, .(@value, @key) { @data-theme: replace(@key , '@', '');
[data-theme=~"@{data-theme}"] {
each(@value, .(@v, @k, @i) {
@color: @v[color];
color: "@{theme-color[@{k}]}";
ss: '@{theme-color}[(~"@{k}")]';
// 循环@theme-color中的某个对象
// each(@theme-color[e("@{k}")], .(@vv, @kk) {// 这里如何动态获取 @theme-color 中的某个对象
// // --@{kk}: @color;
// // color: @vv;
// }
// );
}
);
}
}
);