通过LESS和CSS动态地（在运行时）更改变量？

Question

@myThemeBackground = #ddd;  

div#box1 { background: @myThemeBackground; }  

我正在使用LESS以便为我的css使用变量。它工作正常，但我想知道是否有办法让我在运行时通过javascript或其他东西动态更改“myThemeBackground”。

所以说如果用户为背景选择自定义颜色，我希望整个皮肤都能改变。

注意：这是为了动态地对应用程序进行设置/换肤，例如用户选择背景颜色，然后整个应用程序更改（不刷新页面）

Answer 1

您可以使用modifyVars方法动态修改Less变量：

less.modifyVars({ myThemeBackground : '#000' });

Answer 2

我通常会抓取LESS生成的CSS并将其包含在文件中以优化网页加载速度。事实上，我使用LESS.app为Mac生成我的CSS。

据我所知，部分解决方案涉及将less.js文件包含在您的网页中。这反过来意味着生成页面的样式会很慢，缓存也可能会给你带来麻烦......

我会谦虚地建议使用LESS生成多个CSS样式表，并在需要时使用JavaScript包含这些文件。

Answer 3

我能想到的唯一解决方案是使用less.js更改您渲染的文本：

less.refreshStyles()

更改文件中的文字或样式中较少的片段。

在这里阅读更多相关信息： Load less.js rules dynamically