js动态修改less:
首先,less有client或server两种compile模式,可以在server side先编译成为css,也可以直接使用less到客户端。如果直接在客户端使用less,如下,就可以用js来动态修改变量。此时要引用less.js。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet/less" type="text/css" href="theme-1488.less"> <script src="less-1.4.2.js" type="text/javascript"></script> <script> less.modifyVars({'@SCREEN_BODY_WIDTH' : '50px'}); </script> <title>Less Demo</title> </head>
还有一个方法是less.refreshStyles()
参照http://stackoverflow.com/questions/3175013/load-less-js-rules-dynamically
I just pushed 1.0.31 — it has a method: less.refreshStyles()
which
will re-compile <style>
tags
with type="text/less"
—
try it out and let me know if it works.
http://stackoverflow.com/questions/9757768/use-less-css-preprocessor-server-side-or-client-side是讨论client或server。
http://stackoverflow.com/questions/8556413/passing-variables-to-a-less-js-stylesheet这篇是关于如果一些color存在数据库,如何动态定义变量。
http://stackoverflow.com/questions/13868734/on-the-fly-less-compiler-for-java-web-app
https://github.com/marceloverdijk/lesscss-java
http://www.asual.com/lesscss/是java编译less的工具