更少的CSS-插值-可以更容易吗？

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

/*主题

@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等，我需要在前缀中加上“@”。这很容易忘记，因为正常的变量语法是单个“@”-在层次结构的更高层，我可以做些什么，以便在需要使用代码中的变量时，我可以使用单个“@”来完成吗？

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

lightTheme.less

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

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

暗色调。较少

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

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

然后，您可以

@import

导入主题，而不是通过字符串属性设置主题：

@import "lightTheme.less"

那么您对主题的使用是一个单独的

@

：

background-color:@theme3;

---

简而言之，这是个不错的主意，但我必须考虑一下它在我们的场景中是否可行。@JohnOhara出于兴趣，为什么这在您的场景中不可行？因为，该示例扩展到了色样和主题。色样（10个阴影）可以用作原色或强调色。如果我要导入blue.less和green.less，就会混淆主色和重音是哪种颜色。只是不要通过变量名串联来模拟数组（并删除所有建议这样做的教程和示例）。更少的人有。