如何在浏览器中动态更改参数并编译css？

Question

我正在尝试使用LESS CSS实现基本的主题滚动功能。 假设我有以下Less Code，它编译为页面中包含的.css文件：

@main-background-color: #809BB8;

body
{
    background-color: @main-background-color;
}

我想基于用户操作（颜色选择器）使用javascript动态更改@ main-background-color并动态编译LESS代码并刷新页面样式，以便用户更改立即反映在浏览器。 这有可能吗？ 请指教！

由于

Answer 1

你可以尝试使用less.js函数，如：

less.refreshStyles()

或

less.modifyVars()

你可以在这里阅读更多内容：Dynamically changing less variables

使用 JavaScript 和 modifyVars 这一行可能会有效：

    var $picked-color = "#809BB8";
    less.modifyVars({
        '@main-background-color': $picked-color
    });