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

Question

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

@main-background-color: #809BB8;

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

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

谢谢

score 0 · Accepted Answer

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

less.refreshStyles()

或者

less.modifyVars()

你可以在这里阅读更多内容：Dynamicly changed less variables

与JavaScript和modifyVars类似的东西可能会起作用：

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

1 回答 1