LESS：如何直接从网站动态更改变量答案

【问题标题】：LESS: How to change variables on the fly directly from websiteLESS：如何直接从网站动态更改变量
【发布时间】：2014-02-16 13:32:40
【问题描述】：

我希望我网站上的访问者可以更改我在 LESS 样式表中定义的一些 LESS 变量的值。

例如，如果我声明了以下规则：

@color-of-text: blue;

body
{
  color:@color-of-text;
}

显然，网站有蓝色文字。但是我希望用户可以选择（以哪种方式不重要...下拉菜单或复选框或其他）不同的值，例如将@color-of-text从“蓝色”更改为“红色”，例如我写了“@color-of-text: red;”直接在我的less文件中。

显然，此更改应该即时发生，无需重新加载页面。

如何获得？

【问题讨论】：

Retrieve or set LESS variable from JavaScript? 的可能重复项
How to change the theme color in less css using javascript/jquery 的可能重复项...您可以使用 less.modifyVars() 执行此操作。但是，我不建议在生产环境中进行客户端 LESS 编译。
谢谢你，Martin，我理解你的建议，但这只是一个关于功能和灵活性较低的演示页面，而不是一个真正的生产网站！ :-)

标签： less

【解决方案1】：

您无法编辑 LESS。 LESS 最终会编译成 CSS，然后发送到您的浏览器。

不过，要回答您的问题，您将使用 javascript 并让它更改您想要根据用户输入更改颜色的页面上元素的样式属性。

如果您希望该颜色选择在多个页面加载/访问中保持不变，那就是另一回事了。

【讨论】：

【解决方案2】：

这与less无关。

您可以生成不同的css 文件更改相同less 的颜色变量，然后询问客户端它会看到哪个css。

您可以将选择存储在 cookie 中，然后在访问者的每个请求页面中打印 PHP 中的所需文件

$skin = isset($_COOKIE['skin'])? $_COOKIE['skin'] : 'default';
echo '<link rel="stylesheet" type="text/css" href="path/to/'.$skin.'.css" />';

在选择期间，您可以刷新页面或通过 javascript 更改 css。

【讨论】：

我理解您的建议，但我需要一个 LESS 解决方案，因为我正在创建一个关于 LESS 灵活性的演示网站......
LESS 是一个 CSS PREprocessor。您可以处理 LESS 每个请求，但效率不高。在这种情况下，我们需要更多关于如何从 less 生成 css 的信息（在 php 中使用 exec？）
不不，只是JS在运行时编译。正如我所说，它只是一个演示网站，而不是生产网站。