Css 从字符串中获取较少的变量值

我正在尝试创建一个切换主题的函数。当我将Less转换为CSS时，CSS文件显示文字字符串插值，而不是变量值。变量文件类似于：

@beach-font-color: #3d3d3d;
@ocean-font-color: #d3d3d3;

@theme: "beach";
@symbol: "@";

@currentTheme-font-color: ~"@{symbol}@{theme}-font-color";

在样式表中：

body { color: @currentTheme-font-color; }

生成的css生成：

body  { color: @beach-font-color; }

而不是：

body { color: #3d3d3d; }

我认为可能需要做的一件事是：

@font: ~"@{symbol}@{theme}-font-color";

@currentTheme-font-color: ~"@{font}";

但这只会产生同样的结果

为什么较少的编译器使用字符串文字而不是变量值

按照这些思路，我怎样才能得到变量的值呢？

（我不能跳过这一步，不提供一个备选答案，因为这样的“通过变量名连接的命名空间模拟”是我最喜欢的一种无错误模式（不幸的是，它也是传播最广泛的模式：（））

而不是通过使用长的全局变量名（自20世纪70年代以来，大多数编程语言和范例中的doh#1全局变量被认为是有害的…：）来模拟名称空间，然后通过难看的串联语法（doh#2，

~“@{{{@foo}-@{bar}-严重地}？”

）来组合这些变量名，可以使用语法更清晰的普通名称空间：

.theme(beach) {
    @font-color: #3d3d3d;
    // other beach variables
}
.theme(ocean) {
    @font-color: #d3d3d3;
    // other ocean variables
}

@theme: beach;

.theme(@theme);

body {color: @font-color}

这只是可能的变化之一（有关更多示例，请参阅：

• ->
• )

---

非常感谢。这就解决了问题。