如何在 less 里面使用react变量

使用css的变量和 react element的style

//less文件
.item {
    color: var(--color);

//react element 加上这个属性
style = {
    '--color': red,
}

最终渲染出来的item颜色就是红色

less 循环

原理

@colors是 less 中定义的颜色字符串变量，通过each循环，可以动态设置每一个item的颜色都是和@colors 的顺序保持一致的。

应用场景

可以应用在列表的每一项要求不同样式的情况。

//less文件
each(@colors, {
    .item@{index} {
        color: @value;
}