index.less 里使用:
@global-color: #3c95d7;
body {
background-color: @global-color;
}
我想从文件(txt/json)或者 js 中 获取变量 在 less 引用,找了很多资料用下面方法实现:
cssConfig.txt 内容:
{
"globalColor" : "#3c95d7"
}
https://github.com/less/less.js 下载地址
使用 less.modifyVars() 功能重新编译与JSON变量LESS
示例:
index.html :
<link rel="stylesheet/less" href="index.less" type="text/css">
<script type="text/javascript">less = { env: "development" };</script>
<script src="less.min.js"></script>
<script type="text/javascript">
var request = new XMLHttpRequest();
request.open("GET", "cssConfig.txt", false);
request.send(null);
var data = JSON.parse(request.responseText);
less.modifyVars(data);
</script>
index.less 使用就可以了:
@globalColor: #3c95d7; // 默认值,读取文件变量 后 会被覆盖
body {
background-color: @globalColor;
}