css - LESS CSS - 插值 - 可以更简单吗？

Question

我设置了 LESS 变量来管理颜色选择。这是其中的一部分:

/* 主题

@lightTheme1:@grey300;
@lightTheme2:@grey100;
@lightTheme3:@grey50;
@lightTheme4:#fff;

@darkTheme1:#000;
@darkTheme2:@grey900;
@darkTheme3:#303030;
@darkTheme4:@grey800;

/* 设置主题名称

@theme:'lightTheme';

/* 选择的主题

@theme1:'@{theme}1';
@theme2:'@{theme}2';
@theme3:'@{theme}3';
@theme4:'@{theme}4';

/* 使用主题

@background:@@theme3;
background-color:@@theme3;

我遇到的问题是，为了使用@theme1、theme2 等，我需要在前面加上'@@'。这很容易忘记，因为正常的变量语法是单个“@”——是否有什么我可以在层次结构中更高的地方做的，这样当我需要在代码中使用变量时，我可以用一个“@”来做到这一点？

Answer 1

如果您一次只使用 1 个主题，您可以将主题变量存储在单独的文件中:

lightTheme.less

@theme1:@grey300;
@theme2:@grey100;
@theme3:@grey50;
@theme4:#fff;

darkTheme.less

@theme1:#000;
@theme2:@grey900;
@theme3:#303030;
@theme4:@grey800;

然后您可以@import一个主题，而不是通过字符串属性设置主题:

@import "lightTheme.less"

那么你对主题的使用就是一个@:

background-color:@theme3;